ComponentsDisplayBadge

Badge

Small status indicators and labels. 4 variants, 6 colors, dot mode, count mode and pulse animation.

4 variants6 colorsDot modeCount modePulse

Overview

Small status indicators and labels. 4 variants, 6 colors, dot mode, count mode and pulse animation.

Badge variants

Live preview

Choose a treatment that matches the status importance and surrounding visual density.

filledoutlinedtonalghost
BadgeExample.tsx
tsx
import { Badge } from 'omverse-ui'
 
<Badge variant="filled" color="primary">Filled</Badge>
<Badge variant="outlined" color="primary">Outlined</Badge>
<Badge variant="tonal" color="primary">Tonal</Badge>
<Badge variant="ghost" color="primary">Ghost</Badge>

Use badges for short, scannable metadata such as status, category, count, or a newly available feature.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Badge when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Variants

Live preview

4 variants for different levels of visual emphasis

FilledOutlinedTonalGhost
App.tsx
tsx
import { Badge } from 'omverse-ui'
 
<Badge variant="filled" color="primary">Filled</Badge>
<Badge variant="outlined" color="primary">Outlined</Badge>
<Badge variant="tonal" color="primary">Tonal</Badge>
<Badge variant="ghost" color="primary">Ghost</Badge>

Colors

Live preview

6 semantic colors mapped to design system tokens

DefaultPrimarySecondarySuccessWarningError
App.tsx
tsx
<Badge color="default">Default</Badge>
<Badge color="primary">Primary</Badge>
<Badge color="secondary">Secondary</Badge>
<Badge color="success">Success</Badge>
<Badge color="warning">Warning</Badge>
<Badge color="error">Error</Badge>

All variants and colors

Live preview

4 variants × 6 colors — 24 combinations

defaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerror
App.tsx
tsx
{/* 4 variants × 6 colors */}
<Badge variant="filled" color="default">default</Badge>
<Badge variant="filled" color="primary">primary</Badge>
<Badge variant="filled" color="secondary">secondary</Badge>
<Badge variant="filled" color="success">success</Badge>
<Badge variant="filled" color="warning">warning</Badge>
<Badge variant="filled" color="error">error</Badge>
<Badge variant="outlined" color="default">default</Badge>
<Badge variant="outlined" color="primary">primary</Badge>
<Badge variant="outlined" color="secondary">secondary</Badge>
<Badge variant="outlined" color="success">success</Badge>
<Badge variant="outlined" color="warning">warning</Badge>
<Badge variant="outlined" color="error">error</Badge>
<Badge variant="tonal" color="default">default</Badge>
<Badge variant="tonal" color="primary">primary</Badge>
<Badge variant="tonal" color="secondary">secondary</Badge>
<Badge variant="tonal" color="success">success</Badge>
<Badge variant="tonal" color="warning">warning</Badge>
<Badge variant="tonal" color="error">error</Badge>
<Badge variant="ghost" color="default">default</Badge>
<Badge variant="ghost" color="primary">primary</Badge>
<Badge variant="ghost" color="secondary">secondary</Badge>
<Badge variant="ghost" color="success">success</Badge>
<Badge variant="ghost" color="warning">warning</Badge>
<Badge variant="ghost" color="error">error</Badge>

Sizes

Live preview

sm, md (default) and lg

SmallMediumLarge
App.tsx
tsx
<Badge size="sm" color="primary">Small</Badge>
<Badge size="md" color="primary">Medium</Badge>
<Badge size="lg" color="primary">Large</Badge>

Count

Live preview

Displays a number — automatically caps at 99+

15129999+
App.tsx
tsx
<Badge count={1} color="error" />
<Badge count={5} color="primary" />
<Badge count={12} color="secondary" />
<Badge count={99} color="warning" />
<Badge count={100} color="error" />

Dot mode

Live preview

Minimal dot indicator — children are replaced by a small circle

App.tsx
tsx
<Badge dot color="success">Online</Badge>
<Badge dot color="error">Offline</Badge>
<Badge dot color="warning">Away</Badge>

Pulse animation

Live preview

Animated pulse ring around the dot — requires dot=true

App.tsx
tsx
{/* pulse requires dot=true */}
<Badge dot pulse color="success">Live</Badge>
<Badge dot pulse color="error">Alert</Badge>

Props / API

Api Props

Props

PropTypeDefaultDescription
variant'filled' | 'outlined' | 'tonal' | 'ghost''filled'Visual style
color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error''default'Color scheme
size'sm' | 'md' | 'lg''md'Badge size
dotbooleanfalseShows a dot instead of text
pulsebooleanfalseAdds a pulse animation (requires dot=true)
countnumberundefinedShows a number — automatically capped at 99+