Badge
A styled badge.
Badge
Installation
CLI
Add component to your project.
npx @perceptui/cli@latest add badgeImport from @perceptui/ui
Note: If you have installed @perceptui/ui package, then import Badge
from @perceptui/ui.
import { Badge } from "@perceptui/ui";Badge
API References
| Prop | Type | Description | Default |
|---|---|---|---|
| variant | "solid" | "outline" | "soft" | Form of the Badge | solid |
| color | string | Color of the Badge | blue |
| radius | "none"|"sm"|"md"|"lg"|"xl"|"full" | Radius of the Badge | none |
| className | string | className | _ |
Examples
Variant
Use the variant prop to control the visual style of the Badge.
Solid Variant
Badge
Outline Variant
Badge
Soft Variant
Badge
Color
Use the color prop to control the color of the Badge.
Color with solid variant
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Color with outline variant
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Color with soft variant
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
There are more color properties. Take your time to explore
Radius
Use the radius prop to assign a specific radius value.
Badge
Badge
Badge
Badge
Badge
Badge
Badge