Component

Tag

A small pill of colored text on a tinted background, used to mark a status or category inline with other content.

The primitive

CompletedPendingFailed

tag.tsx

<NativeTag label="Completed" variant="green" />
<NativeTag label="Pending" variant="orange" />
<NativeTag label="Failed" variant="red" />

Example

Attached to each row in a transaction list, summarizing where a payment stands without needing to open it.

Payout to Chase BankCompleted

Payout to Ally BankPending

tag-example.tsx

<div className="flex items-center justify-between">
  <span>Payout to Chase Bank</span>
  <NativeTag label="Completed" variant="green" />
</div>
<div className="flex items-center justify-between">
  <span>Payout to Ally Bank</span>
  <NativeTag label="Pending" variant="orange" />
</div>

Capabilities

Prop	Type	Description
labelrequired	string	—
variant	NativeTagVariant	—
size	NativeTagSize	—
icon	React.ReactNode	—
color	string	Custom foreground color (when variant="custom")
bg	string	Custom background color (when variant="custom")
className	string	—