Badge
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Badge } from "@corew500/ui/badge"
<Badge>Content</Badge>Variants
badgeVariants
| Axis | Values | Default |
|---|---|---|
| variant | defaultsecondarydestructiveoutlineghostlinksuccesswarninginfo | default |
| animated | truefalse | false |
Variants
DefaultSecondaryDestructiveOutline
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant | enum | default | — |
| animated | enum | false | — |
Accessibility
Keyboard Navigation
- - When used as a link (via `render` prop), inherits anchor semantics and keyboard navigation
- Focus visible states provide clear keyboard navigation feedback via ring
Screen Readers
- Text content is announced by screen readers
- For icon-only badges, provide `aria-label` via props
- Consider using `role="status"` for dynamic status badges
Localization
Translatable Content
- - Component accepts pre-resolved/translated strings as children
- All text content should be translated before passing to the component
- Icon-only badges should have localized `aria-label`