Badge
Last updated:2026-02-03 15:50:39
Component Feature
A component for display status, tag or number tag, supporting various colors, sizes and style variants, configured as normal or capsule shape.
Basic Usage
Set the badge text via label, and control the color and style with color and variant.
Template example:
<Badge label="new feature" color="success" variant="solid" />
Effect display as follows:
Attribute Description
Property Name | Type | Description | Default value |
label ★ | string | Badge text content | - |
color | "secondary" | "success" | "danger" | "warning" | "info" | "discovery" | Badge color | "secondary" |
variant | "solid" | "soft" | "outline" | Badge style variant | "solid" |
size | "sm" | "md" | "lg" | Badge size | "md" |
pill | boolean | whether it is capsule shape | false |
Note:
★ Marked with required attribute.
Color Description
secondary: minor/default color
success: success/green
danger: dangerous/red
warning: warning/yellow
info: info/blue
discovery: found/purple
Style Variant Description
solid: solid fill
soft: soft background
outline: border style
Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No
Feedback