Components

DhTag

Small semantic status pill. Neutral / info / success / warning / error. Optional icon.

Open in Figma

Types

neutral info success warning error
<DhTag type="neutral" text="neutral" />
<DhTag type="info"    text="info" />
<DhTag type="success" text="success" />
<DhTag type="warning" text="warning" />
<DhTag type="error"   text="error" />

Sizes

neutral info success warning error neutral info success warning error
<DhTag size="sm" type="info" text="Small" />
<DhTag size="md" type="info" text="Medium" />

With icon

Verified Almost full Failed Syncing 3 people
<DhTag type="success" icon="circle-check" text="Verified" />
<DhTag type="warning" icon="triangle-alert"         text="Almost full" />
<DhTag type="error"   icon="circle-x"             text="Failed" />
<DhTag type="info"    icon="refresh-cw"        text="Syncing" />
<DhTag type="neutral" icon="users"          text="3 people" />

Numeric counts

3 12 99+
<DhTag size="sm" type="info"    text="3" />
<DhTag size="sm" type="error"   text="12" />
<DhTag size="sm" type="success" text="99+" />

Inline in body

Tags sit neatly inside a sentence — they inherit the surrounding type size.

A task has reached Complete, but one more is still Pending review.

<DhBody>
  A task has reached <DhTag type="success" text="Complete" />,
  but one more is still <DhTag type="warning" text="Pending review" />.
</DhBody>