Badge
Badge is a stylish way of adding accessory context to your UI. It comes in four sizes and can be used with any of the color variants.
Basic Usage
default badge
lg neutral badge
xs primary badge
Code Example
Basic.vue
Badge is a stylish way of adding accessory context to your UI. It comes in four sizes and can be used with any of the color variants.
Badge is a standalone component.
Badge is used to inform the user of the status of specific data.
| Badge Props | Type | Description |
|---|---|---|
ghost | boolean | Uses a ghost style instead of background fill. |
outline | boolean | Uses an outline style instead of background fill. |
dash | boolean | Uses a dash style instead of background fill. |
soft | boolean | Softens the badge color. |
invert | boolean | Inverts the badge's background and text colors. |
color | string | Sets the badge color to one of the below prop names. |
| neutral | boolean | Sets the color to neutral. |
| primary | boolean | Sets the color to primary. |
| secondary | boolean | Sets the color to secondary. |
| accent | boolean | Sets the color to accent. |
| info | boolean | Sets the color to info. |
| success | boolean | Sets the color to success. |
| warning | boolean | Sets the color to warning. |
| error | boolean | Sets the color to error. |
size | string | Sets the badge size to one of the below prop names. |
| lg | boolean | Sets the badge size to |
| md | boolean | Sets the badge size to |
| sm | boolean | Sets the badge size to |
| xs | boolean | Sets the badge size to |
Shows how to use a badge with a close icon or dismiss action.
Demonstrates all supported badge color variants, including usage of the color prop and color boolean props.
Applies the ghost prop for a subtle, low-contrast badge appearance.
Applies the outline prop for a badge with a border and no background fill.
Applies the dash prop for a badge with a dashed border and no background fill.
Showcases the four badge sizes: xs, sm, md, and lg, using the size prop or boolean props.