Skip to main content

Badge

Feedback & Status

Badge

Compact status or count indicator that attaches to icons, avatars, or text.

Usage

Surface unread counts, severity states, or quick metadata.

Highlights

  • Small/Large sizing
  • Token-aware color parsing

When to use it

  • Show numeric counters on navigation icons.
  • Indicate object state (live, draft, offline).

Related components

ChipHelperText

Examples​

Default​

Preview (Web)
import { Badge } from 'react-native-molecules/components/Badge';

export default function Example() {
  return <Badge label="10" />;
}

Small Badge​

Preview (Web)
import { Badge } from 'react-native-molecules/components/Badge';

export default function Example() {
  return <Badge size="sm" />;
}
PropTypeDefaultDescription
labelstring | number | undefined——
size"sm" | "md" | undefined——
labelPropsOmit<TextProps, "children"> | undefined——
Defined in react-native-molecules/components/Badge