Backoffice
Segment
One option (Figma "Backoffice / Segment" 2056:43522): Default, Hover, Focus, Active (the checked one: muted fill, medium label).
30 px tall, radius 4.
<Segment value="past_due" count={3}>Em atraso</Segment>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Segment
boolean
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).
| Default | Hover | Focus | Active |
|---|---|---|---|
Todos24 | Todos24 | Todos24 | Todos24 |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
SegmentGroupProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — | |
| onValueChange? | ((value: Value) => void) | — |
SegmentProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| count? | ReactNode | — | Figma "count" (showCount): how many rows the option holds. Leave it out when the list cannot count it (paged lists). |
| className? | string | — | |
| children | ReactNode | — |