Badge

The Badge component is used to highlight and display short status descriptors, notifications, or labels. It supports various variants, sizes, and shapes, and can include icons or counters.

Import

import { Badge } from 'rebel-ui';

Usage

Basic Badge

<Badge label="New" />

Badge Variants

Available variants: default, primary, and error.

<Badge label="Default" variant="default" />
<Badge label="Primary" variant="primary" />
<Badge label="Error" variant="error" />

Badge Sizes

Available sizes: sm, md, and lg.

<Badge label="Small" size="sm" />
<Badge label="Medium" size="md" />
<Badge label="Large" size="lg" />

Badge Shapes

Available shapes: rounded, pill, and square.

<Badge label="Rounded" shape="rounded" />
<Badge label="Pill" shape="pill" />
<Badge label="Square" shape="square" />

Badge with Icon

<Badge 
    label="With Icon" 
    icon={() => `<svg>...</svg>`} 
/>

Badge with Counter

<Badge counter={5} />
<Badge counter={99} />
<Badge counter={100} /> <!-- Shows as "99+" -->

Badge with Dot

<Badge label="Notifications" showDot />

Disabled Badge

<Badge label="Disabled" disabled />

Bordered Badge

<Badge label="Bordered" bordered />

Custom Colored Badge

<Badge label="Custom" customColor="#8B5CF6" />

Props

Prop	Type	Default	Description
label	string	''	The text content of the badge
variant	'default' \| 'primary' \| 'error'	'default'	The visual style variant of the badge
size	'sm' \| 'md' \| 'lg'	'md'	The size of the badge
shape	'rounded' \| 'pill' \| 'square'	'pill'	The shape of the badge
icon	() => string	undefined	Function that returns an SVG string for the icon
showDot	boolean	false	Whether to show a dot indicator
counter	number	undefined	Displays a number (shows “99+” for numbers > 99)
disabled	boolean	false	Whether the badge is disabled
bordered	boolean	false	Whether to show a border
customColor	string	undefined	Custom color for the badge (CSS color value)

Sizes

Size	Padding	Font Size
sm	0.125rem 0.375rem	0.75rem
md	0.25rem 0.5rem	0.875rem
lg	0.375rem 0.75rem	1rem

Styling

The Badge component uses CSS variables for theming:

.badge {
    --rebel-surface: /* background color for default variant */
    --rebel-text-primary: /* text color */
    --rebel-brand: /* background color for primary variant */
    --rebel-error: /* background color for error variant */
    --rebel-border: /* border color when bordered is true */
}

Accessibility

• Uses semantic HTML with appropriate ARIA attributes
• Includes role="status" for screen reader announcements
• Provides aria-label for badge content
• Icons are properly hidden from screen readers with aria-hidden="true"
• Maintains color contrast ratios for all variants
• Disabled state is properly conveyed to assistive technologies

Examples

Notification Badge

Status Badge

Error Badge