Skip to content

Badge

DisplayWeb + NativeMIT
View in Storybook

Status and category labels in default, secondary, destructive, and outline variants.

bun add @otfdashkit/ui

Preview

Badge
Loading Storybook preview…

Code

import { 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.

See the kit

Props

Props declared in the Badge source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
variant'default' | 'secondary' | 'destructive' | 'outline' | null'default'