Badge

Status indicators and labels

DisplayStable

Preview

Interactive preview of the Badge component with different variants.

DefaultSecondaryOutlineSuccessWarningError

Installation

Install the package via npm:

bash
npm install apex-design-system

Import

tsx
import { Badge } from 'apex-design-system';

Basic Usage

tsx
<Badge>Default</Badge>

Variants

The component supports multiple visual variants:

tsx
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in StorybookView source