Badge

A small status indicator for labelling and categorising content.

NewLivePOST
export default function BadgeHero() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge variant="solid" theme="accent">
        New
      </Badge>
      <Badge variant="soft" theme="destructive">
        <SignalIcon />
        Live
      </Badge>
      <Badge variant="outline" theme="success">
        POST
      </Badge>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add "https://ora-ui.com/r/badge.json"

Usage

import { Badge } from '@/registry/ui/badge';

<Badge>Badge</Badge>;

Examples

Variants

The variant prop controls the visual style of the badge.

Badge
export function BadgeSolid() {
  return <Badge variant="solid">Badge</Badge>;
}

Theme

The theme prop applies a color scheme across all variants.

Badge
export function BadgeGray() {
  return <Badge theme="gray">Badge</Badge>;
}

With icon

Icons can be placed inline alongside a label.

Featured
export function BadgeLeading() {
  return (
    <Badge>
      <StarIcon />
      Featured
    </Badge>
  );
}

Icon only

Use size="icon" for compact status indicators where space is limited.

export default function BadgeIconOnly() {
  return (
    <Badge size="icon">
      <StarIcon />
    </Badge>
  );
}

As a link

Pass render={<a />} to render the badge as an anchor element.

New feature
export default function BadgeAsLink() {
  return (
    <Badge render={<a href="#as-a-link" />}>
      New feature
      <ArrowTopRightOnSquareIcon />
    </Badge>
  );
}

API Reference

Badge

PropTypeDefault
variant"solid" | "soft" | "outline" | "surface""soft"
size"default" | "icon""default"
theme"gray" | "accent" | "destructive" | "warning" | "success""gray"
renderReact.ReactElement<span>
classNamestring—

All other props are forwarded to the rendered element.