import { Indicator } from '@uhg-abyss/mobile';<Indicator> <Badge>Indicator Sandbox</Badge></Indicator>Offset
Use the offset prop to change the position of the Indicator. It is useful when the Indicator component is used with children that have border radius.
Color
Use the color prop to change the color of the Indicator. Default value is set to '$indicator.color.surface.container'.
Label
Use the label prop to add a label to the indicator. A value greater than 99 will display as "99+". Use the overflowCount prop to change the overflow value.
Indicator Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The contents of the indicator component |
| color | string | $indicator.color.surface.container | Color of the indicator |
| label | number | string | - | Label of the indicator |
| offset | number | 0 | Change the indicator default position based on the position variant |
| overflowCount | number | 99 | Overflow count display |
| position | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-end' | Position of the indicator |
| showZero | boolean | true | Flag to hide label when value is 0 |
Indicator Classes
| Class Name | Description |
|---|---|
| abyss-indicator | Indicator element |
| abyss-indicator-label | Indicator label element |
| abyss-indicator-root | Indicator root element |
Indicator Tokens
| Token Name | Value | |
|---|---|---|
| indicator.color.surface.container | #990000 | |
| indicator.color.border.container | #FFFFFF | |
| indicator.color.text.label | #FFFFFF | |
| indicator.border-radius.all.container | 500 | |
| indicator.border-width.all.container.badge-count | 1 | |
| indicator.border-width.all.container.alert-indicator | 2 | |
| indicator.sizing.all.container.alert-indicator | 12 | |
| indicator.sizing.width.min.container.badge-count | 20 | |
| indicator.sizing.height.min.container.badge-count | 20 | |
| indicator.spacing.padding.vertical.container.badge-count | 4 | |
| indicator.spacing.padding.horizontal.container.badge-count | 6 |