Icon Badge
DisplayMITIconographic status badge with color tokens — for activity feeds and notifications.
bun add @otfdashkit/ui
Preview
Icon BadgeDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Star } from 'lucide-react'
import { IconBadge } from '@otfdashkit/ui'
export function Example() {
return (
<div className="flex flex-wrap gap-4 items-center">
{(['default', 'primary', 'success', 'warning', 'error', 'purple'] as const).map((c) => (
<div key={c} className="flex flex-col items-center gap-1">
<IconBadge icon={<Star className="h-5 w-5" />} color={c} />
<span className="text-xs text-[hsl(var(--muted-foreground))]">{c}</span>
</div>
))}
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the IconBadge source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| iconrequired | ReactNode | ||
| className | string | ||
| color | 'default' | 'error' | 'primary' | 'success' | 'warning' | 'purple' | 'default' | |
| size | 'sm' | 'lg' | 'md' | 'md' |