Component

Tag

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

Standalone

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 list, summarizing status without needing to open the item.

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	-