Tag

What something is: a label such as a ticket tag, "Default", "Test run", or an email address in a list. For the state something is in, use Status.

Installation

bun add @harmo-ui/css @harmo-ui/react

npm install @harmo-ui/css @harmo-ui/react

pnpm add @harmo-ui/css @harmo-ui/react

yarn add @harmo-ui/css @harmo-ui/react

bunx harmo-ui add tag

npx harmo-ui add tag

pnpm dlx harmo-ui add tag

yarn dlx harmo-ui add tag

Usage

import { Tag } from "@harmo-ui/react";

<Tag color="var(--harmo-amber)">Billing</Tag>
<Tag variant="accent">Unread</Tag>

Examples

This site is using your theme

Default

A rectangle with 13px text, for what something is: a ticket tag, a kind of run, or an email address in a list.

DefaultTest runjane@example.com

<>
  <Tag>Default</Tag>
  <Tag>Test run</Tag>
  <Tag>jane@example.com</Tag>
</>

<span class="htag">Default</span>
<span class="htag">Test run</span>
<span class="htag">jane@example.com</span>

With a color

Set --htag-color and add a .htag-dot: the dot and the border take the color. Any color works, since a tag's color carries no meaning.

BillingOnboardingPartner

<>
  <Tag color="var(--harmo-amber)">Billing</Tag>
  <Tag color="var(--harmo-cyan)">Onboarding</Tag>
  <Tag color="#d0488f">Partner</Tag>
</>

<span class="htag" style="--htag-color: var(--harmo-amber)">
  <span class="htag-dot" aria-hidden="true"></span>Billing
</span>
<span class="htag" style="--htag-color: var(--harmo-cyan)">
  <span class="htag-dot" aria-hidden="true"></span>Onboarding
</span>
<span class="htag" style="--htag-color: #d0488f">
  <span class="htag-dot" aria-hidden="true"></span>Partner
</span>

Accent

data-variant="accent" draws the border and text in the primary color, for emphasis such as Unread.

Unread

<Tag variant="accent">Unread</Tag>

<span class="htag" data-variant="accent">Unread</span>

Long text

In a narrow container, drawn dashed here, a tag wraps its text, breaking long words such as an email address, rather than overflowing.

campaign-reports@example.comEnterprise onboarding

<>
  <Tag>campaign-reports@example.com</Tag>
  <Tag color="var(--harmo-cyan)">Enterprise onboarding</Tag>
</>

<span class="htag">campaign-reports@example.com</span>
<span class="htag" style="--htag-color: var(--harmo-cyan)">
  <span class="htag-dot" aria-hidden="true"></span>Enterprise onboarding
</span>

API reference

React

<Tag> renders the tag, with its children as the text. Other props are the <span>'s attributes.

Prop	Effect
`color`	Any CSS color: sets `--htag-color` and adds the dot
`variant`	`accent`

HTML

A <span class="htag"> with the label as its text, and optionally a .htag-dot before it, with aria-hidden="true". Load tag.css. It needs no script.

Hook	Effect
`--htag-color` with a `.htag-dot`	The tag's own color, on the dot and the border; any color works
`data-variant="accent"`	Border and text in `--harmo-color-primary`, for emphasis such as "Unread"

See Tag's full contract.

Accessibility

The text carries the meaning; the dot is decorative (aria-hidden).