REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Data Display

Tag

A compound component for displaying categorized labels with optional icons and close buttons.

Example

Preview

Code

Props

Tag Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tag container.

action

'info' | 'success' | 'warning' | 'error'

'info'

Semantic color action of the tag.

variant

'solid' | 'outline' | 'subtle'

'subtle'

Visual variant of the tag.

size

'sm' | 'md' | 'lg'

'md'

Controls the size of the tag.

TagText Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the tag text.

TagIcon Props

Prop

Type

Default

Description

as *

React.ElementType

—

The icon component to render.

className

string

—

NativeWind utility classes for the tag icon.

TagCloseButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the close button.

onPress

() => void

—

Callback when close is pressed.

Usage Guidelines

When to use

Use Tag to categorize, label, or filter content with small interactive chips.

Best practices

•

Keep tag text short — one or two words.

•

Use semantic action colors to convey meaning.

•

Provide an onPress handler for TagCloseButton when tags are removable.

Accessibility

Tag text is readable by screen readers. TagCloseButton should have an appropriate accessibility label.

Related Components

Badge

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

TagsInput

A text input that produces tag chips, useful for entering multiple values.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License