Tag – Once UI

Tag is a static label for a status, a category or a piece of metadata. It stays on one line. For something that announces or links, use Badge. See the web Tag page for the web version.

Tag

import { Tag } from "@once-ui-system/native";

export function Status() {
return <Tag label="In stock" scheme="success" />;
}

Schemes and sizes

scheme picks the color, from neutral (the default) to brand, accent, info, danger, warning and success. size is s, m or l.

Schemes and sizes

import { Row, Tag } from "@once-ui-system/native";

export function Labels() {
return (
  <Row gap="8" wrap vertical="center">
    <Tag size="s" label="Draft" />
    <Tag size="m" label="Brand" scheme="brand" />
    <Tag size="l" label="Overdue" scheme="danger" />
    <Tag label="Pending" scheme="warning" />
  </Row>
);
}

Icons

prefixIcon and suffixIcon take an icon name, as on the web, or any element.

Icons

import { Row, Tag } from "@once-ui-system/native";

export function Meta() {
return (
  <Row gap="8">
    <Tag label="Today" prefixIcon="calendar" scheme="info" />
    <Tag label="Favourite" suffixIcon="star" scheme="brand" />
  </Row>
);
}

API reference

Tag does not take Flex props. Use style for the outer view.

Prop	Type	Default	Description
label	string		The tag text. children is used when it is not set.
scheme	"neutral" \| "brand" \| "accent" \| "info" \| "danger" \| "warning" \| "success"	"neutral"	The color scheme.
size	"s" \| "m" \| "l"	"m"	The tag size.
prefixIcon	IconName \| ReactNode		An icon before the text.
suffixIcon	IconName \| ReactNode		An icon after the text.
children	ReactNode		The text, when there is no label.
style	ViewStyle		Style for the tag.