Badge

A small badge component with customizable variants and shiny animation effects.

Badge

Interactive badge with default styling and animation

Installation

npx scrollx-ui@latest add badge

import { Badge } from "@/components/ui/badge";

<Badge variant="default" shiny={true}>Badge</Badge>

Badge

Default badge with primary color and shine effect

Subtle badge with secondary color theme and shine

High-contrast badge for warnings and errors

Minimal badge with border and transparent background

The Badge component creates a customizable label with variant styling and optional shiny animation effect.

variant – Controls the visual style of the badge. Options include: default, secondary, destructive, and outline.

shiny – Optional boolean to enable animated shine effect.

shinySpeed – Optional number that controls animation speed in seconds.

className – Optional custom class names to apply to the badge.

...props – Inherits all standard HTML div attributes and event handlers.