Inputs
SegmentedControl
Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Segmented Control
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Size · md
| Items | Segmented Control |
|---|---|
| 2 | Todos12Novos3 |
| 3 | Todos12Novos3Resolvidos9 |
| 4 | Todos12Novos3Resolvidos9Arquivados |
Size · touch
| Items | Segmented Control |
|---|---|
| 2 | Todos12Novos3 |
| 3 | Todos12Novos3Resolvidos9 |
| 4 | Todos12Novos3Resolvidos9Arquivados |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
SegmentedControlRootProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| size? | "md" | "touch" | "md" | md = 40 px track (desktop, backoffice), touch = 48 px. |
| children | ReactNode | — | |
| className? | string | — | |
| onValueChange? | ((value: string) => void) | — |
SegmentedControlItemProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | ReactNode | — | The label (Figma "label"). |
| count? | number | — | The number after the label (Figma "count"); zero is hidden. |
| className? | string | — |