ComponentsDisplayBadge

Badge

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

4 variants6 colorsDot modeCount modePulse

Variants

Live preview

4 variants for different levels of visual emphasis

FilledOutlinedTonalGhost

App.tsx

tsx

1import { Badge } from 'omverse-ui'
2 
3<Badge variant="filled" color="primary">Filled</Badge>
4<Badge variant="outlined" color="primary">Outlined</Badge>
5<Badge variant="tonal" color="primary">Tonal</Badge>
6<Badge variant="ghost" color="primary">Ghost</Badge>

Colors

Live preview

6 semantic colors mapped to design system tokens

DefaultPrimarySecondarySuccessWarningError

App.tsx

tsx

1<Badge color="default">Default</Badge>
2<Badge color="primary">Primary</Badge>
3<Badge color="secondary">Secondary</Badge>
4<Badge color="success">Success</Badge>
5<Badge color="warning">Warning</Badge>
6<Badge color="error">Error</Badge>

All variants and colors

Live preview

4 variants × 6 colors — 24 combinations

defaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerrordefaultprimarysecondarysuccesswarningerror

App.tsx

tsx

1{/* 4 variants × 6 colors */}
2<Badge variant="filled" color="default">default</Badge>
3<Badge variant="filled" color="primary">primary</Badge>
4<Badge variant="filled" color="secondary">secondary</Badge>
5<Badge variant="filled" color="success">success</Badge>
6<Badge variant="filled" color="warning">warning</Badge>
7<Badge variant="filled" color="error">error</Badge>
8<Badge variant="outlined" color="default">default</Badge>
9<Badge variant="outlined" color="primary">primary</Badge>
10<Badge variant="outlined" color="secondary">secondary</Badge>
11<Badge variant="outlined" color="success">success</Badge>
12<Badge variant="outlined" color="warning">warning</Badge>
13<Badge variant="outlined" color="error">error</Badge>
14<Badge variant="tonal" color="default">default</Badge>
15<Badge variant="tonal" color="primary">primary</Badge>
16<Badge variant="tonal" color="secondary">secondary</Badge>
17<Badge variant="tonal" color="success">success</Badge>
18<Badge variant="tonal" color="warning">warning</Badge>
19<Badge variant="tonal" color="error">error</Badge>
20<Badge variant="ghost" color="default">default</Badge>
21<Badge variant="ghost" color="primary">primary</Badge>
22<Badge variant="ghost" color="secondary">secondary</Badge>
23<Badge variant="ghost" color="success">success</Badge>
24<Badge variant="ghost" color="warning">warning</Badge>
25<Badge variant="ghost" color="error">error</Badge>

Sizes

Live preview

sm, md (default) and lg

SmallMediumLarge

App.tsx

tsx

1<Badge size="sm" color="primary">Small</Badge>
2<Badge size="md" color="primary">Medium</Badge>
3<Badge size="lg" color="primary">Large</Badge>

Count

Live preview

Displays a number — automatically caps at 99+

15129999+

App.tsx

tsx

1<Badge count={1} color="error" />
2<Badge count={5} color="primary" />
3<Badge count={12} color="secondary" />
4<Badge count={99} color="warning" />
5<Badge count={100} color="error" />

Dot mode

Live preview

Minimal dot indicator — children are replaced by a small circle

App.tsx

tsx

1<Badge dot color="success">Online</Badge>
2<Badge dot color="error">Offline</Badge>
3<Badge dot color="warning">Away</Badge>

Pulse animation

Live preview

Animated pulse ring around the dot — requires dot=true

App.tsx

tsx

1{/* pulse requires dot=true */}
2<Badge dot pulse color="success">Live</Badge>
3<Badge dot pulse color="error">Alert</Badge>

Props

PropTypeDefaultDescription

variant'filled' | 'outlined' | 'tonal' | 'ghost''filled'Visual style

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+