Components/Badge

Badge

Compact status labels for conveying state at a glance. Seven semantic variants including gradient, animated dot indicator, and optional pulse animation.

import { Badge } from "@animui/ui"

Variants

DefaultPrimarySuccessWarningDangerOutlineLive

Props

PropTypeDefaultDescription
variant"default" | "primary" | "success" | "warning" | "danger" | "outline" | "gradient""default"Controls the color scheme of the badge.
dotbooleanfalseAdds an animated dot indicator before the label.
pulsebooleanfalseApplies a pulse animation to the badge.
classNamestringAdditional Tailwind classes.
childrenReact.ReactNodeBadge label content.
© 2026 Steal Shadow. MIT License.Report an issue