Badge

A compact label for status, counts, or categories.

Import

import { Badge } from '@oztix/roadie-components'

Examples

Default

<Badge>Badge</Badge>

Emphasis

<div className='flex flex-row flex-wrap gap-2'>
  <Badge emphasis='strong'>Strong</Badge>
  <Badge emphasis='normal'>Normal</Badge>
  <Badge emphasis='subtle'>Subtle</Badge>
  <Badge emphasis='subtler'>Subtler</Badge>
</div>
View code

Sizes

<div className='flex flex-row flex-wrap items-center gap-2'>
  <Badge size='sm'>Small</Badge>
  <Badge size='md'>Medium</Badge>
</div>

Intents

<div className='flex flex-row flex-wrap gap-2'>
  <Badge intent='neutral'>Neutral</Badge>
  <Badge intent='accent'>Accent</Badge>
  <Badge intent='brand'>Brand</Badge>
  <Badge intent='info'>Info</Badge>
  <Badge intent='success'>Success</Badge>
  <Badge intent='warning'>Warning</Badge>
  <Badge intent='danger'>Danger</Badge>
</div>
View code

With indicator

Use the indicator prop to show a dot before the text. Add indicatorPulse for a slow pulse animation.

<div className='flex flex-row flex-wrap gap-2'>
  <Badge indicator intent='success'>Active</Badge>
  <Badge indicator indicatorPulse intent='danger'>Live</Badge>
  <Badge indicator intent='info'>Processing</Badge>
  <Badge indicator indicatorPulse intent='warning'>Attention</Badge>
</div>
View code

With icons

Place icons directly as children. SVGs are automatically sized to match the text.

<div className='flex flex-row flex-wrap gap-2'>
  <Badge intent='success'><CheckCircle weight='bold' /> Verified</Badge>
  <Badge intent='danger'><XCircle weight='bold' /> Failed</Badge>
  <Badge intent='info'><Info weight='bold' /> Info</Badge>
  <Badge intent='warning'><Warning weight='bold' /> Caution</Badge>
</div>
View code