Badge
DisplayWeb + NativeMITStatus and category labels in default, secondary, destructive, and outline variants.
bun add @otfdashkit/ui
Preview
BadgeDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Badge } from '@otfdashkit/ui'
export function Example() {
return (
<div className="flex gap-2 flex-wrap">
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Error</Badge>
<Badge className="bg-green-500 text-white border-transparent">Success</Badge>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Kit for this component
Everything Bundle$149 · 6 kits + 20 templates
Label status, counts or categories with small badges.
Props
Props declared in the Badge source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'destructive' | 'outline' | null | 'default' |