Badge API
API reference docs for the Stash Badge component. Learn about the props, CSS, and other APIs of this exported module.
Import
ts
import Badge from '@leaflink/stash/Badge.vue';Props
| Name | Type | Default | Description |
|---|---|---|---|
| animate | boolean | false | If true, the badge will animate when the content changes |
| color | "red" | "blue" | red | Color of the badge Options: 'red' or 'blue' |
| content | number | string | undefined | The badge's content |
| isDisabled | boolean | false | Shows a gray badge with content |
| max | number | string | 99 | The max value of the `content` prop. If the value is greater than this, the badge will show the max value and a `+` sign. |
| offset | { top?: number; right?: number; } | () => ({
top: undefined,
right: undefined,
}) | Offset to adjust the badge's position. It does not apply to inline position badges. |
| position | "top-right" | "inline" | top-right | Badge position. Options: - inline: shows the badge directly next to the content (on the right), with a left margin of 6px - top-right: will overlap the badge over whatever is passed in the default slot |
| showZero | boolean | false | The badge will be hidden if the content is `0` unless this prop is set to true. |
| variant | "dot" | "standard" | standard | Badge variant |
Slots
| Name | Description |
|---|---|
| default |
Events
None