Tags

Tags displays a wrapping group of compact labels with an optional semantic tone.

Usage

Pass an array of labels to tags . Blank labels are ignored, and the row wraps when it runs out of space. If there are no visible labels, the component displays a muted dash placeholder.

<script>
	import { Tags } from 'deskblocks';
</script>

<Tags tags={['billing', 'refund', 'priority-customer']} />

Tone

Use tone when every label in the group shares the same meaning. For example, a danger tone can identify escalation tags, while a success tone can identify completed work. Leave the tone unset for the neutral appearance.

<Tags tone="info" tags={['feature-request', 'roadmap']} />
<Tags tone="success" tags={['resolved', 'verified-fix']} />
<Tags tone="warning" tags={['sla-risk', 'awaiting-customer']} />
<Tags tone="danger" tags={['escalated', 'churn-risk']} />

Empty state

<Tags tags={[]} />

Tags or Chip

Use Tags to display a group of plain, read-only labels. Use Chip when you need one label with an icon, avatar, disabled state or dismiss action.

Props

Events

None.