FilterChip
An applied filter above a table (Figma "Backoffice / Filter Chip" 2056:48830, Kind=Applied): "Status: Atenção", pressing it edits the filter, the × removes it.
Default, Hover, Focus. The chips row wraps.
<FilterChip label="Status" value="Atenção" onClick={edit} onRemove={clear} removeLabel="Remover filtro Status" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Backoffice / Filter Chip
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).
Kind · Applied
| Default | Hover | Focus |
|---|---|---|
Kind · Add
| Default | Hover | Focus |
|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
FilterChipProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | The filter's name, "Status". |
| value | string | — | The applied value, "Atenção". |
| onRemove? | (() => void) | — | Figma "showRemove": removes the filter. |
| removeLabel? | string | — | Name of the remove button, e.g. "Remover filtro Status". Required with `onRemove`. |
| className? | string | — |
FilterChipAddProps
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className? | string | — | |
| children? | React.ReactNode | — |
KpiTile
A headline number (Figma "Backoffice / KPI Tile" 2056:48793): 220 × 122 card, or "In strip" (borderless, no radius) inside a divided stat strip.
FilterSelect
A dropdown filter in a table toolbar (Figma "Backoffice / Filter Select" 2079:10277, from the shipped page/filter-select.tsx): the label in muted text, the choice in medium, a chevron; 36 px.