Skip to main content

Badge

import { Badge } from "tawuniya/components";

👉 View in Storybook

Props​

PropTypeDefaultDescription
variant"default" | "destructive" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | "outline" | "plain""default"Visual style variant of the badge.
size"sm" | "md" | "lg" | "xl""md"Size of the badge (controls padding and font size).
rounded"sm" | "md" | "lg" | "full""full"Border-radius style for the badge corners.
shadow"none" | "sm" | "md" | "lg""none"Shadow depth applied to the badge.
asChildbooleanfalseIf true, renders the badge as a child component via Radix Slot.
classNamestring—Additional CSS classes for custom styling.
...propsReact.ComponentProps<"span">—Other standard HTML attributes applied to the badge element.

Usage Examples​

Default Badge​

<Badge>Default</Badge>

Colored Variants​

<>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="info">Info</Badge>
</>

Sizes​

<>
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
  <Badge size="lg">Large</Badge>
  <Badge size="xl">Extra Large</Badge>
</>

Rounded Corners and Shadows​

<>
  <Badge rounded="sm" shadow="sm">
    Rounded Sm Shadow Sm
  </Badge>
  <Badge rounded="md" shadow="md">
    Rounded Md Shadow Md
  </Badge>
  <Badge rounded="lg" shadow="lg">
    Rounded Lg Shadow Lg
  </Badge>
  <Badge rounded="full" shadow="none">
    Rounded Full No Shadow
  </Badge>
</>

Rendering as a Different Element​

import { Link } from "react-router-dom";

<Badge asChild>
  <Link to="/profile">Profile Link</Link>
</Badge>;

Accessibility​

  • The badge uses a semantic <span> by default.
  • When using asChild, ensure the child component is accessible and properly labeled.
  • Visual focus styles are included when the badge is focused via keyboard navigation.