Badge
The Badge component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to just draw attention to a specific element. Content within the badge usually contains numbers or icons.
info
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| color | Applies specified color. | string | primary |
| bordered | Applies a 2px by default and 1.5px border around the badge when using the dot property. | boolean | false |
| bottom | Aligns the component towards the bottom. | boolean | false |
| class | Allows custom properties to take effect. | string | undefined |
| content | Any content you want injected as text into the badge. | any | undefined |
| dark | Applies the dark theme. | boolean | false |
| dot | Reduce the size of the badge and hide its contents. | boolean | false |
| icon | Designates a specific icon used in the badge. | string | mdi-account |
| left | Aligns the component towards the left. | boolean | false |
| label | The aria-label used for the badge. | string | 'My Badge' |
| mode | Sets the transition mode. | string | undefined |
| offsetX | Offset the badge on the x-axis. | number-string | undefined |
| offsetY | Offset the badge on the y-axis. | number-string | undefined |
| origin | Sets the transition origin on the element. | string | undefined |
| overlap | Overlaps the slotted content on top of the component. | boolean | false |
| tile | Removes the component’s border-radius. | boolean | false |
| transition | Sets the component transition. | string | undefined |
| inline | Moves the badge to be inline with the wrapping element. Supports the usage of the left prop. | boolean | false |
| avatar | Removes badge padding for the use of the Avatar in the badge slot. | boolean | false |
| value | Sets the icon is visible or not. | boolean | true |
Samples Component
