Badge

A compact, non-interactive status indicator. Five semantic variants map directly to signal colors from the theme — the exact hues update automatically when switching themes or light/dark mode.

When to use: Status labels (Active, Pending, Error), notification counts, tier indicators (Pro, Free), category tags in read-only contexts.

When not to use: Interactive filters or removable tags — use Chip. Counts that need to be dismissed or updated — consider a custom implementation. Long phrases — Badge is optimized for 1-4 words.

Import

import { Badge } from '@/components';

Usage

<Badge label="Pro" variant="accent" />
<Badge label="Active" variant="success" />
<Badge label="Pending" variant="warning" />
<Badge label="Expired" variant="error" />
<Badge label="Draft" />

Props

Prop	Type	Default	Description
label	string	—	Display text (required)
variant	'default' | 'accent' | 'success' | 'warning' | 'error'	'default'	Semantic color
testID	string	—	For testing

Variants

Variant	Background	Text	Use for
default	surfaceRaised	textSecondary	Neutral status, draft
accent	accentSubtle	accent	Tier, feature, highlight
success	successSubtle	success	Active, complete, verified
warning	warningSubtle	warning	Pending, review, expiring
error	errorSubtle	error	Expired, failed, invalid

Paired with a heading

<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
  <Heading level={3}>Sarah Chen</Heading>
  <Badge label="Pro" variant="accent" />
</View>

Notification count

<View style={{ position: 'relative' }}>
  <IconButton icon={Bell} accessibilityLabel="Notifications" onPress={open} />
  {count > 0 && (
    <View style={{ position: 'absolute', top: -4, right: -4 }}>
      <Badge label={String(count)} variant="error" />
    </View>
  )}
</View>

Accessibility

Badge is non-interactive and has no role. The label text is included in the accessibility tree for screen readers.

Related

• Chip — interactive tag (selectable or removable)
• Text — for status text that doesn’t need a visual container