Components

Tag

Small inline labels with a 1px border and no radius. A neutral default plus four status families — info, success, warning and danger — and an optional × button for removable tags.

Variants

Default · info · success · warning · danger

Draft In review Approved Pending Rejected

<span class="ds-tag">Draft</span>
<span class="ds-tag ds-tag--info">In review</span>
<span class="ds-tag ds-tag--success">Approved</span>
<span class="ds-tag ds-tag--warning">Pending</span>
<span class="ds-tag ds-tag--danger">Rejected</span>

Removable

With × button

Marketing Region: EU Active

<span class="ds-tag ds-tag--removable">Marketing
  <button class="ds-tag__remove" type="button" aria-label="Remove">×</button></span>
<span class="ds-tag ds-tag--info ds-tag--removable">Region: EU
  <button class="ds-tag__remove" type="button" aria-label="Remove">×</button></span>

React

<Tag />

import { Tag } from "@diametral/design-system/react";

<Tag>Draft</Tag>
<Tag status="success">Approved</Tag>
<Tag status="warning">Pending</Tag>
<Tag status="info" onRemove={() => remove("eu")}>Region: EU</Tag>