Badge: Sizes

sm, default and lg. Icons, dots, the close button and counts scale with the badge.

SmallPaidLivedesign

DefaultPaidLivedesign

LargePaidLivedesign

import { IconCheck } from "@tabler/icons-react"

import { Badge, BadgeClose, BadgeCount, BadgeDot } from "@/components/ui/badge"

export function BadgeSizes() {
  return (
    <div className="flex flex-col items-center gap-3">
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge size="sm">Small</Badge>
        <Badge size="sm" variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge size="sm" variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge size="sm">
          design
          <BadgeClose />
        </Badge>
        <Badge size="sm">
          <BadgeCount value={42} />
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge>Default</Badge>
        <Badge variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge>
          design
          <BadgeClose />
        </Badge>
        <Badge>
          <BadgeCount value={42} />
        </Badge>
      </div>
      <div className="flex flex-wrap items-center justify-center gap-2">
        <Badge size="lg">Large</Badge>
        <Badge size="lg" variant="success">
          <IconCheck data-icon="inline-start" />
          Paid
        </Badge>
        <Badge size="lg" variant="info">
          <BadgeDot pulse />
          Live
        </Badge>
        <Badge size="lg">
          design
          <BadgeClose />
        </Badge>
        <Badge size="lg">
          <BadgeCount value={42} />
        </Badge>
      </div>
    </div>
  )
}

Add this example

This adds the example as components/examples/badge/sizes.tsx, together with the Badge component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/badge-sizes.json

To add only the component, follow the Badge installation.

Props in this example

The Badge props this example sets, from the API reference.

Badge

Prop	Type	Default
`variant`Colors the dot and icons in outline, or the surface in solid.	`"default" \| "success" \| "info" \| "warning" \| "destructive"`	`"default"`
`size`	`"sm" \| "default" \| "lg"`	`"default"`

BadgeDot

Prop	Type	Default
`pulse`Adds a ping animation for live states. Off when reduced motion is on.	`boolean`	`false`

BadgeCount

Prop	Type	Default
`value`Negative and non-finite values show 0.	`number`	`–`

Every prop is in the Badge API reference.

More Badge examples

See them all, with keyboard support and accessibility notes, on the Badge page.