Skip to main content

Usage

import { Badge } from '@kivora/react';

<Badge variant="success">Active</Badge>

Examples

Variants

<Badge variant="default">Default</Badge>

Sizes

<Badge size="sm">Small</Badge>

Status Examples

<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="info">New</Badge>

Props

children
React.ReactNode
Badge content
variant
'default' | 'success' | 'warning' | 'error' | 'info'
default:"default"
Visual style variant
size
'sm' | 'md'
default:"md"
Badge size
className
string
Additional CSS classes

Accessibility

  • Badge is rendered as a <span> element
  • Ensure badge text is concise and meaningful
  • Consider using ARIA labels for icon-only badges

Build docs developers (and LLMs) love