Badge

Compact status labels with default and dot variants.

This update isEarly AccessandOn Track.

Installation

npx shadcn@latest add @iconiq/badge

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

This update isEarly AccessandOn Track.

Props

Badge

6 props

Compact label pill with a shimmer-enabled default variant, a quieter dot variant, and preset color tokens.

childrenReactNode

Required

Badge content rendered above the optional shimmer layer so labels stay readable while the default variant animates.

classNamestring

Default""

Appended directly to the root badge element. Useful for radius, spacing, or local border overrides.

variant"default" | "dot"

Default"default"

Chooses between the animated filled badge and the quieter outlined badge with a leading status dot.

size"sm" | "md" | "lg"

Default"md"

Controls height, horizontal padding, gap, and label size for denser or roomier badge treatments.

colorBadgeColor

Default"gray"

Picks a preset palette token. The default variant turns it into a tinted fill, while the dot variant uses it for the status dot and border tint.

waveColorstring

Optional shimmer midpoint override for the default variant. When omitted, the sweep derives a subtle tone from the current text color.

Notes

The component now spreads remaining span props, so ids, data attributes, and click handlers can be attached directly.

When reduced motion is enabled, the default variant skips the mount and shimmer animation and renders as a static badge.

ReducedMotion

1 prop

Shared motion override for the motion-enabled exports documented on this page.

reducedMotionboolean

When true, the component uses its calmer motion path immediately. Leaving it unset still respects the user's system-level reduced motion preference.

Notes

This prop can force reduced motion on, but it does not opt out of OS-level accessibility preferences when the system is already requesting less motion.