Components
Badge
Displays a badge or a component that looks like a badge.
Badge
Installation
npm install @mijn-ui/react-badgeUsage
import { Badge } from "@mijn-ui/react-badge"<Badge variant="outlined">Badge</Badge>Examples
Variants
Badge
filledBadge
outlinedBadge
subtleBadge
ghostBadge
lightColors
Badge
defaultBadge
brandBadge
secondaryBadge
successBadge
warningBadge
dangerBadge
inverseSizes
Badge
smBadge
mdBadge
lgRadius
Badge
defaultBadge
pillBadge
fullAPI Reference
Standard element attributes are forwarded to the underlying component in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "filled" | "outlined" | "subtle" | "ghost" | "light" | "filled" | Visual style of the badge. |
color | "default" | "brand" | "secondary" | "success" | "warning" | "danger" | "inverse" | "default" | Color scheme of the badge. |
size | "sm" | "md" | "lg" | "md" | Size of the badge. |
radius | "default" | "pill" | "full" | "default" | Border radius of the badge. |
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
Badge Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | Badge | Styles the badge component. |