Badge
import { Badge } from '@enmovil/ui-design-system';
Shows a count or a dot badge over its children, such as an avatar or an icon. Use count for a number or showDot for a simple indicator.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
count | number | Yes | — | — | The count to display on the badge |
color | string | No | var(--enmv-avatar-default-bg) | — | Background colour of the count or dot, as any CSS colour. Defaults to the design system's avatar background colour (--enmv-avatar-default-bg). |
showDot | boolean | No | false | — | Whether to show a dot instead of a number |
Other attributes
Badge passes 282 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onIncrease | (() => void) | @deprecated Never fired: BadgeAvatar renders no buttons. Will be removed in a future major version. |
onDecrease | (() => void) | @deprecated Never fired: BadgeAvatar renders no buttons. Will be removed in a future major version. |
onRandom | (() => void) | @deprecated Never fired: BadgeAvatar renders no buttons. Will be removed in a future major version. |
onClick | MouseEventHandler<HTMLSpanElement> | Fires when the badge or its wrapped content is clicked. |
onMouseEnter | MouseEventHandler<HTMLSpanElement> | Fires when the pointer enters the badge or its wrapped content. |
onMouseLeave | MouseEventHandler<HTMLSpanElement> | Fires when the pointer leaves the badge or its wrapped content. |
Children
children (ReactNode): —
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Basic example.
Loading playground…
Storybook
Open Badge in Storybook to try every story with the full set of controls.