Badge ​
Content
Loading...
Variants
Loading...
Dot
Loading...
A badge component that generates a small badge at the top-right of its children.
- Tag:
<flint-badge> - Class:
FlintBadge
Import ​
ts
import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintBadge } from '@getufy/flint-ui';Usage ​
html
<flint-badge></flint-badge>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
content | content | string | '' | Text content displayed inside the badge. |
dot | dot | boolean | false | Whether to display a small dot instead of content. |
invisible | invisible | boolean | false | Whether the badge is hidden. |
variant | variant | 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'primary' | Color variant of the badge. |
max | max | number | 99 | Maximum numeric value before displaying "max+". |
Slots ​
| Name | Description |
|---|---|
(default) | The content to which the badge is attached. |
CSS Parts ​
| Name | Description |
|---|---|
base | The component's base wrapper element. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-badge-background | var(--flint-primary-color |
--flint-badge-color | var(--flint-text-color-on-primary |
--flint-badge-border-color | transparent |
--flint-font-family | — |
--flint-primary-color | — |
--flint-text-color-on-primary | — |
--flint-secondary-color | — |
--flint-text-color-on-secondary | — |
--flint-error-color | — |
--flint-success-color | — |
--flint-warning-color | — |