LLabanaat

Badge

Small status or labeling element with six semantic variants.

<Badge>New</Badge>

Editable — change the code above and the preview updates live.

Variants

<div className="ui-flex ui-flex-wrap ui-gap-2">
  <Badge variant="neutral">Neutral</Badge>
  <Badge variant="primary">Primary</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">Warning</Badge>
  <Badge variant="danger">Danger</Badge>
  <Badge variant="outline">Outline</Badge>
</div>

Editable — change the code above and the preview updates live.

Installation

import { Badge } from "@labanaat/ui/badge";

Props

PropTypeDefaultDescription
variant"neutral" | "primary" | "success" | "warning" | "danger" | "outline""neutral"Visual style