import { FilterButton } from '@uhg-abyss/mobile';() => { return <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 variant's use case.
FilterButton Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | number | undefined | - | - | The label of the button |
onPress | Abyss.GestureResponderEventHandler | - | - | Callback fired when the Button is pressed |
variant | 'primary' | 'secondary-a' | 'secondary-b' | undefined | 'primary' | - | Change the button style |
FilterButton Classes
| Class Name | Description |
|---|---|
| abyss-filter-button-root | FilterButton root element |
| abyss-filter-button-label | FilterButton label element |
| abyss-filter-button-icon | FilterButton icon 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 |