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.
Single choice, with counts. For a filter already applied above the table, use Filter Chip.
<FilterSelect label="Fornecedor" options={[{ value: "all", label: "Todos" }, { value: "iproyal", label: "IPRoyal", count: 12 }]} defaultValue="all" onValueChange={setSupplier} />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 Select
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 | Open |
|---|---|---|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | — | Read before the choice: "Fornecedor" → "Fornecedor: Todos". |
| options | FilterOption[] | — | |
| value? | string | — | |
| defaultValue? | string | — | |
| onValueChange? | ((value: string) => void) | — | |
| open? | boolean | — | The menu's open state (base-ui naming). |
| defaultOpen? | boolean | — | |
| onOpenChange? | ((open: boolean) => void) | — | |
| className? | string | — |
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.
ColumnsButton
Shows or hides table columns (Figma "Backoffice / Columns Button" 2079:10330, from the shipped data-table/columns-menu.tsx): a 32 px outline trigger with the columns icon, opening a checklist.