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

Get started for freeTalk to us