Skip to content

Tag

A quiet, static label for an attribute or category, such as "Cashless" or "Home collection".

betaSource
CashlessOwn pocketPrescription requiredHome collection

Installation

pnpm add @syntara/react @syntara/tokens
import { Tag } from '@syntara/react';

Usage

import { Tag } from '@syntara/react';

export function Benefit() {
  return (
    <div style={{ display: 'flex', gap: 'var(--syntara-space-2)' }}>
      <Tag tone="success" uppercase>Cashless</Tag>
      <Tag>Home collection</Tag>
    </div>
  );
}

Examples

Sizes

md (24px) and sm (20px), soft, uppercase and dashed.

Network clinicsCashlessOptional add-on
Network clinicsCashlessOptional add-on

Variants and tones

soft, outline and dashed across all seven tones.

DiagnosticsIn networkWellnessTeleconsultCoveredWaiting periodExcluded
DiagnosticsIn networkWellnessTeleconsultCoveredWaiting periodExcluded
DiagnosticsIn networkWellnessTeleconsultCoveredWaiting periodExcluded

Tag or Badge

Tags say what something is; a Badge says what state it's in.

Lab testsActive
CashlessHome collectionPrescription required

Leading icon or avatar

An icon or a small Avatar before the label.

Covered by employerHome collectionPrescription requiredPriya

Accessibility

No keyboard interaction of its own.

  • A tag is plain text in a span: no role, not focusable, not interactive.
  • The leading slot is aria-hidden; the label must carry the meaning.
  • uppercase is CSS text-transform, so screen readers read the words, not letters.
  • Outline and dashed text sits on the page: text.default/text.subtle, text.brand, accent.text and feedback.*.fg are each checked against surface.default (not every surface; keep them on default or raised surfaces).
  • Pops in on mount (scale 0.8 to 1 on the spring); with reduced motion it simply appears.

Guidelines

Do

  • Use Tag for attributes and categories: what something is or includes ("Cashless", "Home collection").
  • Keep most tags neutral; tint the one attribute that matters most.
  • Use uppercase for one- or two-word attributes, sentence case for longer ones.
  • Use dashed for an optional or not-yet-added attribute.

Don’t

  • Don't use a Tag for status or counts ("Paid", "3 new"). That's a Badge: Badge = status or count, Tag = attribute or category.
  • Don't make tags clickable. For filters, use ChipGroup (or ToggleButtonGroup for a segmented control).
  • Don't rely on tone alone: the words must say it.

API reference

Tag

tone
  • neutraldefault
  • brand
  • accent
  • info
  • success
  • warning
  • danger

Colour. Soft tags use contrast-checked pairs: text.subtle/surface.sunken (neutral), action.secondary.fg/bg (brand), accent.text/accent.subtle (accent), feedback.*.fg/bg.

variant
  • softdefault
  • outline
  • dashed

soft = tinted fill (neutral adds a hairline edge), outline = hairline edge only, dashed = a placeholder or optional attribute.

size
  • sm
  • mddefault

md is 24px tall, sm is 20px.

uppercase
boolean

Small-caps style: uppercase, ~10% smaller, semibold, tracked open (0 tracking for Arabic-capable type pairs). Visual only: the DOM text keeps its case.

Default false

leading
ReactNode

Leading icon or small Avatar, sized to the tag. Decorative (aria-hidden).

childrenRequired
ReactNode

The label: one to three words. Long labels truncate with an ellipsis.

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Colour14
surface.sunkentext.subtletext.defaulttext.brandborder.subtleborder.defaultborder.strongaction.secondary.bgaction.secondary.fgaccent.subtleaccent.textfeedback.*.bgfeedback.*.fgfeedback.*.border
Type7
font.bodyfont.size.xsfont.tracking.xsfont.heading.trackingfont.weight.mediumfont.weight.semiboldline-height.tight
Space and size6
space.1space.2space.4space.5space.6icon.stroke
Shape2
radius.badgeradius.pill
Depth1
hairline
Motion4
motion.duration.fastmotion.duration.springmotion.springmotion.easingOut