Badge
Badges are used to highlight status, labels, or counts.
Import
import { Badge } from "@gumtree/ui/Badge" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | "neutral" | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | - | Color of the badge |
variant | "outline" | "dash" | "soft" | "ghost" | - | Visual variant |
size | "xs" | "sm" | "md" | "lg" | - | Size of the badge |
children | ComponentChildren | - | Badge content |
Examples
Colors
Badges support all daisyUI semantic colors.
neutralprimarysecondaryaccentinfosuccesswarningerror
< Badge color = "neutral" > neutral </ Badge >
< Badge color = "primary" > primary </ Badge >
< Badge color = "secondary" > secondary </ Badge >
< Badge color = "accent" > accent </ Badge >
< Badge color = "info" > info </ Badge >
< Badge color = "success" > success </ Badge >
< Badge color = "warning" > warning </ Badge >
< Badge color = "error" > error </ Badge > Variants
Different visual styles for badges.
outlinedashsoftghost
< Badge variant = "outline" > outline </ Badge >
< Badge variant = "dash" > dash </ Badge >
< Badge variant = "soft" color = "primary" > soft </ Badge >
< Badge variant = "ghost" > ghost </ Badge > Sizes
Badges can be rendered at different sizes.
xssmmdlg
< Badge size = "xs" color = "primary" > xs </ Badge >
< Badge size = "sm" color = "primary" > sm </ Badge >
< Badge size = "md" color = "primary" > md </ Badge >
< Badge size = "lg" color = "primary" > lg </ Badge >