Badge Properties
Compact UI elements that highlight status, labels, or counts with various styles and colors. Customizable in size and appearance with support for disabled states.
Preview
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Badge component
Copy this code to create your Badge component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
Colors and Styles
The Badge component supports various colors and styles to suit different UI contexts. Each style is available in multiple colors.
filled Style
The primary style for badges, offering high contrast and visibility.
light Style
A softer variant that maintains color association while reducing visual weight.
lighter Style
A softer variant that maintains color association while reducing visual weight.
stroke Style
An outline style that provides a subtle yet distinct appearance.
Rounded vs Default
Badges can have either rounded or square corners. Use the 'rounded' prop to switch between these styles.
Badge Sizes
Badges come in two sizes: default (h-5) and small (h-4). Use the 'size' prop to switch between these sizes.
Badges with Icons
Icons can be added to badges to provide additional visual cues. Icons can be positioned on the left or right side of the badge text.
Badges with Dots
Dots can be used instead of icons for a more subtle indicator. They're particularly useful for status indicators or notifications.
Status Badges
Status badges are used to indicate different states or levels of importance. They come with predefined colors and can be displayed with icons or dots in both rounded and default styles.
Custom Badge
You can create a custom badge with full class override capabilities.
Rounded Badges
Rounded badges provide a softer look with fully rounded corners, ideal for modern UI designs.
API Reference
The Badge component provides a versatile way to display short status descriptors in your interface. It uses Radix UI's Slot primitive for composition when the asChild prop is used.
Badge.Root
Main badge component with support for various styles, colors, and sizes.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "small""medium""lg""string" | "small" | Size of the badge |
variant | "filled""light""lighter""stroke""default""secondary""outline""destructive" | "filled" | Visual style variant of the badge |
color | "neutral""gray""blue""orange""red""green""yellow""purple""sky""pink""teal" | "neutral" | Color theme of the badge |
disabled | "boolean" | "false" | Whether the badge is in a disabled state |
square | "boolean" | "false" | Whether to use square (minimal) padding |
rounded | "boolean" | "false" | Whether to use fully rounded corners (pill shape) |
asChild | "boolean" | "false" | Whether to merge props onto child component |
Badge.Icon
Adds an icon to the badge with proper sizing and alignment.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactElement" | "undefined" | Icon component to render |
size | "small""medium""string" | "small" | Size of the icon |
Badge.Dot
Displays a small dot indicator within the badge for status representation.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "small""medium""string" | "small" | Size of the dot indicator |