Badge
Displays small status indicators or notifications, customizable in color, size, style, and position to match your design.
Notification Variants
J
Variants
Colors
Sizes
Radius
Badge With React Node
Features
- Versatile usage with any element or component
- Supports text, number, or custom node as content
- Multiple color, size, and variant options
- Configurable border radius and placement
- Fully accessible and extendable
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The element to which the badge will be attached. |
| className | string | — | Custom class name for additional styling. |
| color | "base" | "primary" | "secondary" | "success" | "warning" | "danger" | — | Color theme of the badge. |
| size | "sm" | "md" | "lg" | — | Size of the badge. |
| rounded | "sm" | "md" | "lg" | "xl" | "full" | — | Border radius of the badge. |
| placement | "topRight" | "topLeft" | "bottomRight" | "bottomLeft" | — | Position of the badge relative to the children. |
| variant | "solid" | "flat" | "faded" | "shadow" | — | Visual style of the badge. |
| content | string | number | React.ReactNode | — | The content to be displayed inside the badge. |
| ...props | React.HTMLAttributes<HTMLSpanElement> |