Loading navigation…
User
API and Development
Counter formats value with locale-aware grouping (no decimal digits) and centers it in a fully rounded pill. CounterSize selects Small or Regular text. In @prepared911/ui-core, CounterColor selects Default, Subtle, or Error. In @prepared911/ui/counter, the same roles are Selected, Resting, and Destructive. Pass className to place the counter, for example to pin it over the control it counts for.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | The numeric value to display |
|
| — | Class applied to the counter root. Use it to place the counter, for example to pin it over an icon as an unread badge. |
|
|
| The color of the counter |
|
|
| The size of the counter |
Interactive examples and edge cases for this component are in Storybook.
Solid error fill, for unread counts that need to pull the eye. @prepared911/ui-core names this CounterColor.Error. @prepared911/ui names it CounterColor.Destructive.
Import Counter from @prepared911/ui/counter. CounterColor.Destructive is the solid destructive fill (--color-status-destructive-solid with --color-status-destructive-on-solid) for an urgent count. It is the one-to-one replacement for CounterColor.Error.
@prepared911/ui-core | @prepared911/ui |
|---|---|
CounterColor.Default | CounterColor.Selected |
CounterColor.Subtle | CounterColor.Resting |
CounterColor.Error | CounterColor.Destructive |