REACT-NATIVES

WIRED FOR SPEED

react-natives v2.2.0

Theme

Light

Dark

Get Started

Components

Core Primitives

Badge

A compound component for displaying short status labels, counts, or tags with semantic color and variant options.

Example

Preview

Code

Props

Badge Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the badge container.

action

'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'info' | 'muted'

'primary'

The semantic color action of the badge.

variant

'solid' | 'outline' | 'subtle'

'solid'

The visual variant of the badge.

size

'sm' | 'md' | 'lg'

'md'

The size of the badge.

BadgeText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the badge text.

BadgeIcon Props

Prop

Type

Default

Description

as *

React.ElementType

—

The icon component to render inside the badge.

className

string

—

NativeWind utility classes for the badge icon.

Usage Guidelines

When to use

Use Badge to annotate elements with a small status indicator, count, or label.

Best practices

•

Use semantic action colors (success, error, warning) to convey status meaning.

•

Keep badge text short — ideally 1-2 words or a number.

•

Pair subtle variant with non-critical status indicators.

Accessibility

Badge text is readable by screen readers. Ensure the badge context is clear when read in isolation.

Related Components

Avatar

A compound component for displaying user profile images, initials fallback, online badges, and grouped avatar stacks.

Button

A compound interactive button component with text, icon, and spinner sub-components, supporting multiple actions, variants, and sizes.

Icon

A wrapper component for rendering icon elements from any icon library via the `as` prop.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License