Components
Tag
A compact label for a status, category, or keyword.
Usage
import { Tag } from '@acronis-platform/ui-react';Tag renders a <span> styled by the --ui-tag-* tokens. An optional leading
icon is rendered at 16px before the label.
Badgeis an alias ofTag. The legacy generic shadcnBadgeis replaced by the design-system-nativeTag, which carries its own token tier, icon slot, and sizes.import { Badge } from '@acronis-platform/ui-react're-exportsTag— same props, same variants. PreferTagin new code.
Examples
Semantic variants (default is neutral):
<Tag variant="info">Info</Tag>
<Tag variant="success">Success</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="critical">Critical</Tag>
<Tag variant="danger">Danger</Tag>
<Tag variant="neutral">Neutral</Tag>
<Tag variant="ai">AI</Tag>Two sizes — default (24px) and sm (20px):
<Tag variant="info">Default</Tag>
<Tag variant="info" size="sm">Small</Tag>With a leading icon:
import { CheckIcon } from '@acronis-platform/icons-react/stroke-mono';
<Tag variant="success" icon={<CheckIcon />}>
Completed
</Tag>API Reference
Prop
Type