Badge

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

Installation

npx scrollx-ui@latest add badge

Usage

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

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

Examples

API Reference

Badge

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.