Segment.Button

The Segment.Button slot represents a single option within a Segment. It renders a clickable button with a transition.

Installation

Every component ships with the boilerplate. If you are working in your own project, add Segment with the Gameface CLI:

npx gameface-cli add Segment

The CLI pulls in whatever Segment depends on. To refresh an existing copy, update it instead.

Usage

To create a Segment.Button you need to wrap it in the Segment component and provide a value to it. You must also provide the selected prop to the Segment.Button you wish to be selected by default.

index.tsx

import Segment from '@components/Basic/Segment/Segment';

<>
    <Segment>
        <Segment.Button selected value="red">red</Segment.Button>
        <Segment.Button value="green">green</Segment.Button>
        <Segment.Button value="blue">blue</Segment.Button>
    </Segment>
</>

Note

If multiple Segment.Button components have the selected prop, only the last one with selected will be active by default.

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component.
value	string	undefined	The string value the Segment button is associated with.
selected	boolean	false	Specify if the Segment button is selected.
disabled	boolean	false	Specify if the Segment button is disabled.
class-disabled	string	""	Additional CSS classes to apply to the button when disabled.

Guide

You can find examples of how to work with the Segment buttons in the Segment documentation.