Badge

Badge displays compact metadata such as status, count, or category labels. Use it inside dense list, table, and card layouts where a full Alert would be too heavy.

Code

<div className="tw:flex tw:flex-wrap tw:gap-2">
  <Badge variant="default">Confirmed</Badge>

  <Badge variant="secondary">Pending</Badge>

  <Badge variant="destructive">Blocked</Badge>

  <Badge variant="outline">Draft</Badge>

  <Badge variant="ghost">Archived</Badge>

  <Badge variant="link">View account</Badge>
</div>

API

Badge

Name	Type/Description
ref	((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
variant = "default"	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined