import { FilterButton } from '@uhg-abyss/mobile';<FilterButton variant="primary"/>Label
Use the label prop to set the label of the FilterButton. The label can be a filter count or 'filter'. If there is no count, the secondary variants should have the label of 'filter' passed in.
Variant
Use the variant prop to change the style of the FilterButton. You can set the value to 'primary', 'secondary-a', and 'secondary-b'. Please follow design guidelines for each variants use case.
FilterButton Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| label | string | number | - | The label of the filter button component |
| onPress | function | - | Callback fired when the filter button is pressed |
| variant | 'primary' | 'secondary-a' | 'secondary-b' | primary | Change the filter button style |
FilterButton Classes
| Class Name | Description |
|---|---|
| abyss-filter-button-icon | FilterButton icon element |
| abyss-filter-button-label | FilterButton label element |
| abyss-filter-button-root | FilterButton root element |
FilterButton Tokens
| Token Name | Value | |
|---|---|---|
| filter-button.color.surface.container.primary.rest | #002677 | |
| filter-button.color.surface.container.primary.active | #004BA0 | |
| filter-button.color.surface.container.secondary-a.rest | #FFFFFF | |
| filter-button.color.surface.container.secondary-a.active | #EDF3FB | |
| filter-button.color.text.label.primary | #FFFFFF | |
| filter-button.color.text.label.secondary-a | #002677 | |
| filter-button.color.text.label.secondary-b.rest | #002677 | |
| filter-button.color.text.label.secondary-b.active | #00184D | |
| filter-button.color.icon.utility.primary | #FFFFFF | |
| filter-button.color.icon.utility.secondary-a | #002677 | |
| filter-button.color.icon.utility.secondary-b.rest | #002677 | |
| filter-button.color.icon.utility.secondary-b.active | #00184D | |
| filter-button.color.border.container.secondary-a | #002677 | |
| filter-button.border-radius.all.container | 500 | |
| filter-button.border-width.all.container.secondary-a | 1 | |
| filter-button.sizing.all.icon.with-text | 16 | |
| filter-button.sizing.all.icon.icon-only | 24 | |
| filter-button.spacing.padding.horizontal.container.secondary-a | 16 | |
| filter-button.spacing.padding.horizontal.container.secondary-b | 16 | |
| filter-button.spacing.padding.vertical.container.primary | 8 | |
| filter-button.spacing.padding.vertical.container.secondary-a | 4 | |
| filter-button.spacing.padding.vertical.container.secondary-b | 4 | |
| filter-button.spacing.padding.left.container.primary | 8 | |
| filter-button.spacing.padding.right.container.primary.with-text | 12 | |
| filter-button.spacing.padding.right.container.primary.icon-only | 8 | |
| filter-button.spacing.gap.horizontal.container.primary | 8 | |
| filter-button.spacing.gap.horizontal.container.secondary-a | 8 | |
| filter-button.spacing.gap.horizontal.container.secondary-b | 8 |