Badge

Displays a badge or a component that looks like a badge.

Types

interface BadgeProps extends ComponentProps<"span">, VariantProps<typeof badgeVariants> {
  asChild?: boolean;
  variant?: "default" | "secondary" | "destructive" | "success" | "warning" | "accent";
  type?: "default" | "circle" | "dot";
}

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'success' \| 'warning' \| 'accent'`	`'default'`	Visual style
`type`	`'default' \| 'circle' \| 'dot'`	`'default'`	Shape and layout of the badge
`asChild`	`boolean`	`false`	Render with `Slot` to style a child element
...span props	`ComponentProps<'span'>`	-	All native span props

Examples

DefaultDeployed3

<Badge>Default</Badge>
<Badge variant="success">Deployed</Badge>
<Badge type="circle">3</Badge>
<Badge type="dot" />

Usage

BadgeSecondaryDestructiveSuccesswarning

<div className="flex w-full flex-wrap gap-2">
  <Badge>Badge</Badge>
  <Badge variant="secondary">Secondary</Badge>
  <Badge variant="destructive">Destructive</Badge>
  <Badge variant="success">Success</Badge>
  <Badge variant="warning">warning</Badge>
</div>

33333

<div className="flex w-full flex-wrap gap-2">
  <Badge type="circle">3</Badge>
  <Badge variant="secondary" type="circle">3</Badge>
  <Badge variant="destructive" type="circle">3</Badge>
  <Badge variant="success" type="circle">3</Badge>
  <Badge variant="warning" type="circle">3</Badge>
</div>

<div className="flex w-full flex-wrap gap-2">
  <Badge type="dot" />
  <Badge variant="secondary" type="dot" />
  <Badge variant="destructive" type="dot" />
  <Badge variant="success" type="dot" />
  <Badge variant="warning" type="dot" />
</div>