LabelLabels are used to provide emphasis on a characteristic of an object, e.g. status, state, category.

Overview

Content Types

Property	Preview
Text only
Icon
Avatar
Logo

Style Presets

Preset	Default Type	Prominent Type
Neutral Default label
Primary Prominent label e.g. “New”
Success Positive status label e.g. “Active”
Warning Warning status, e.g. “Waitlist”
Danger Negative status label e.g. “Unpaid”
Light Used on dark or image background
Premium Used for premium indication

Logo labels

Preset	Preview
Admin Wix app logo
Places Spaces app logo
Fitness Fit app logo
Restaurants Dine app logo
Branded Branded apps logo

Size

Property	Preview
Large Height: 24px
Small Height: 20px

SpecLabels expand horizontally according to value width maintaining fixed padding.

Dev

PlaygroundCode Example

INFO

This component support margin modifiers.

APIThis is the list of additional props for the component

accessible

boolean

If true the component will have accessibility features enabled

avatar

AvatarProps

Avatar to be shown next to the text

avoidReverseOnDark

boolean

Whether to avoid reversing the colors in dark mode

backgroundColor

string

The label's background color

color

string

The color that will affect the text and icon of the label

dismissColor

string

Change the color of the dismiss button

icon

number

Icon to be shown next to the text

iconColor

string | null

The color that will affect the icon of the label

onDismiss

() => void

Add a dismiss button which when pressed will call this callback

preset

Preset

The preset colors (Label.presets.xxx)

recorderTag

'mask' | 'unmask'

Recorder Tag

rounded

boolean

Should container have rounded corners

size

LabelSize

The size of the label [SMALL, LARGE] (using Label.sizes.###)

style

ViewStyle

Container style.

testID

string

Test Id for component.

text

string

The text of the label

textStyle

TextStyle

The text's style

type

LabelTypes

The label type (default, prominent)