Back to components
ComponentsIcon text badge
Badges that combine icons and text to convey status, labels, or contextual meaning in a compact format.
Badge
Badge stack
Icon badge
Icon text badge
Component
Badge
Props
| Props | Default | Type |
|---|---|---|
color | ColorAccent.NEUTRAL | ColorAccent |
text | Badge | string |
icon | mdi:help | string |
Usage
color
Applies a color to the badge. It uses the ColorAccent enum.
<template>
<Badge :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 |
text
The text displayed on the badge.
<template>
<Badge text="I am a badge" />
</template>
icon
The icon displayed on the badge.
<template>
<Badge :showIcon="true" icon="mdi:help" />
</template>