ActionsReact Native

Chip

Represent compact selected, actionable, or removable values with native interaction semantics.

Public APILumenChipReact Native

Native example

Use Chip

Use for compact filters, assigned values, or removable tokens. Use Badge for display-only status and Segmented control for mutually exclusive peer choices.

View verified React Native runtime capture

Chip rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenChip
  label="Design"
  selected={selected}
  onPress={() => setSelected(!selected)}
  onRemove={removeDesign}
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenChip.

API	Values or type	Default	Description
label	`String`	`Required`	Provides visible chip text.
selected	`Boolean`	`false`	Exposes selected state.
onPress	`Callback?`	`nil`	Makes the chip selectable or actionable.
onRemove	`Callback?`	`nil`	Adds a separate removal action.
removeLabel	`String`	`Remove label`	Names the removal action.

Native behavior

Design and accessibility

When to use it

Use for compact filters, assigned values, or removable tokens. Use Badge for display-only status and Segmented control for mutually exclusive peer choices.

Accessibility

A selectable chip reports selected and disabled state. Its optional removal action remains separately named and operable.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose