FilterButton
Filter chip for lists and tables: shows the filter name or its chosen value, opens its options, and turns an applied filter on or off.
Master
Pick a value or applied filters to set it: it turns blue and splits. Click the name to switch it on and off; off is dashed. Turn off has dropdown for a plain chip.
Usage
Use FilterButton for filter controls above tables and lists, like Status or Owner, and in the Toolbar filter bar. To open options, use Dropdown with trigger filter: it renders this button and opens the menu. Nothing set: one quiet outline with the chevron; the whole button opens the options. Once a filter is set (value or count) it turns blue; with onToggle it splits in two: the name turns the filter on or off (off keeps the selection, drawn dashed) and the chevron opens the options. hasDropdown false makes a plain on/off chip. See contracts/filterbutton.json for the full contract.
Do's
- Filters above a table or list, like Status, Owner or Date.
- A filter the user can keep but switch off for a moment, without losing what they picked.
Don'ts
- Do not invent a local split button, filter chip or dropdown trigger. Use Dropdown trigger=filter for the menu.
- Do not use for page actions or view switches. Use Button or a Dropdown.
- Do not put more than one word or two in the name.
- Do not show the count as text in the label. Pass count.
- Do not use raw hex.
<FilterButton
size="md"
onToggle={toggleStatus}
>
Status
</FilterButton>