When to use it
Use short status or classification labels. Prefer normal text for sentences, instructions, and frequently changing numeric values.
Data displayReact Native
Badge
Display compact native status and classification labels using semantic tones.
Native example
Use Badge
Use short status or classification labels. Prefer normal text for sentences, instructions, and frequently changing numeric values.
View verified React Native runtime capture
<LumenBadge tone="success">Active</LumenBadge>Reference
Public API
The primary shared and platform-specific options exposed by LumenBadge.
| API | Values or type | Default | Description |
|---|---|---|---|
| children | String / native text | Required | Provides the visible badge label. |
| tone | neutral · accent · success · warning · danger | neutral | Selects the semantic status treatment. |
| style | Native layout API | — | Adds platform-native layout adjustments. |
Native behavior
Design and accessibility
Accessibility
Badge text remains available to assistive technology. Do not encode status only through tone.
Shared component