Badge
A clean, customizable badge component for labels, tags, and status indicators. Built with class-variance-authority for easy variant management and featuring a modern, minimalist aesthetic with glassmorphism support.
Live Interactive Preview
Default
Secondary
Destructive
Outline
Source
npx futureuikit add badge Details
Built with React and class-variance-authority for scalable styling.Supports multiple variants: Default (Glass), Secondary, Destructive, and Outline.Modern, minimalist design with uppercase tracking for a premium feel.Fully customizable via standard HTML attributes and Tailwind classes.Lightweight and optimized for high-density information displays.
How to Use?
- Import the Badge component from your UI directory.
- Choose a variant: 'default', 'secondary', 'destructive', or 'outline'.
- Add your label text as children of the component.
- Use it for tags, status indicators, or small labels across your UI.