Badge
Displays a badge or a component that looks like a badge.
Preview
The Badge component is used to display important messages to users. It comes with several sub components to structure the content effectively.
Badge
Shadwui
Installation
Usage
Examples
01
Badge 01
Shadwui
02
Badge 02
Shadwui
03
Badge 03
Shadwui
04
Badge 04
Shadwui
05
Badge 05
Shadwui
06
Badge 06
Shadwui
07
Badge 07
Shadwui
08
Badge 08
Shadwui
09
Badge 09
Shadwui
10
Badge 10
more...
Badge 11
Badge 12
Shadwui
Options
| Component | Description | Example Output |
|---|---|---|
default | A badge with primary background and foreground colors. | <Badge>Default Badge</Badge> |
secondary | A badge with secondary background and foreground colors. | <Badge variant="secondary">Secondary Badge</Badge> |
destructive | A badge with destructive background and foreground colors. | <Badge variant="destructive">Destructive Badge</Badge> |
outline | A badge with no background and default foreground color. | <Badge variant="outline">Outline Badge</Badge> |