Library · Foundations

Badge

Inline badge component with support for multiple semantic types, sizes, pill/circular variants, button mode with hover animations, and pulse animation for attention-grabbing.

Figma: Primitives / Badge ↗

Live preview — edit theme bottom-right

---
import Badge from "../components/primitives/badge/Badge.astro";
---
<Badge type="default">Default</Badge>
<Badge type="info">Info</Badge>
<Badge type="success">Success</Badge>
<Badge type="warning">Warning</Badge>
<Badge type="error">Error</Badge>
<Badge isPill type="info">Pill Badge</Badge>
<Badge isCircular>3</Badge>
<Badge isButton animateOnHover animationType="boop">Click me</Badge>
<Badge pulse type="info">Pulse</Badge>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the Badge
`type`	`'info' \| 'success' \| 'warning' \| 'error' \| 'default'`	—	Type of the badge (default: "default")
`size`	`'sm' \| 'md' \| 'lg'`	—	Size of the badge (default: "md")
`isButton`	`boolean`	—	Whether to render as a button element (default: false)
`animateOnHover`	`boolean`	—	Whether to animate the icon on hover (only works with isButton) (default: false)
`animationType`	`'rotate' \| 'boop' \| 'bouncing' \| 'nudge' \| 'none'`	—	Type of animation to apply on hover (when isButton is true) (default: "boop")
`animationIntensity`	`number`	—	Animation intensity (1-10) (default: 5)
`isCircular`	`boolean`	—	Whether to display the badge as a circle (best for single numbers/characters) (default: false)
`isPill`	`boolean`	—	Whether to display the badge with fully rounded corners (pill style) (default: false)
`pulse`	`boolean`	—	Whether to apply a pulsating animation to draw attention (pulses 3 times) (default: false)
`label`	`string`	—	Accessible label for screen readers This should be provided when the badge contains only icons or non-textual content for proper accessibility. For badges with clear text content, this is optional.
`[key: string]`	`string \| number \| boolean \| undefined`	—	HTML attributes to spread on the badge

Example with all props

<Badge
  class="inbox-badge"
  type="info"
  size="lg"
  isButton
  animateOnHover
  animationType="rotate"
  animationIntensity={7}
  isPill
  pulse
  label="Seven new notifications"
>
  7 new
</Badge>

<!-- isCircular is an alternative shape to isPill -->
<Badge isCircular type="error">3</Badge>