Badge
Displays a badge or a component that looks like a badge.
Installation
Install via CLI:
npx @sickui/cli add badge
Manual Installation
If you prefer to install manually, copy and paste the following code into your project.
npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge
Usage
Badge
Variants
Use the variant prop to change the visual style of the Badge.
Default
Destructive
Outline
Secondary
Examples
Variants
You can use the variant prop to create different badge styles.
API Reference
Badge
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "default" | The variant of the badge |
asChild | boolean | false | Change the default rendered element for the one passed as a child |
Accessibility
The Badge component is built on top of the native badge element and includes:
- Keyboard navigation: Supports
EnterandSpacekey activation - Focus management: Proper focus indicators and focus trapping
- Screen reader support: Semantic badge element with proper ARIA attributes
- Disabled state: Properly communicated to assistive technologies
Examples in the Wild
Here are some real-world examples of how the Badge component is used:
- Call-to-action buttons in hero sections
- Form submission buttons in contact forms
- Navigation buttons in pagination components
- Action buttons in data tables and cards