Badge
Status and category indicators. Compact labels for metadata.
Examples
Default
Default
Success
Published
Warning
Pending
Error
Failed
Info
Beta
With Icon
As Link
Badge styled as a clickable link.
v2.4.1 →
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Badge } from "@rokle/components";import { Badge } from "@rokle/components";
export function Example() {
return (
<div className="flex flex-wrap gap-2">
<Badge>Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "warning" | "error" | "info" | "default" | Colour variant. |
| children | ReactNode | - | Badge content. |