Back to components
ComponentsIcon badge
Small, colored circular badges used to highlight or decorate icons with contextual meaning or status.
Badge
Badge stack
Icon badge
Icon text badge
Component
Props
| Props | Default | Type |
|---|---|---|
color | ColorAccent.NEUTRAL | ColorAccent |
icon | mdi:help | string |
Usage
color
Applies a color to the badge. It uses the ColorAccent enum.
<template>
<IconBadge :color="ColorAccent.NEUTRAL" />
</template>
Options
| Value | Description |
|---|---|
NEUTRAL | Neutral |
SUCCESS | Success |
WARNING | Warning |
DANGER | Danger |
INFO | Info |
PRIMARY_BRAND | Primary Brand |
SECONDARY_BRAND | Secondary Brand |
icon
The icon displayed on the badge.
<template>
<IconBadge icon="mdi:help" />
</template>