Skip to content

Eyebrow

A small uppercase kicker label with wide tracking that sits above a heading, figure or section.

betaSource

First time here

One wallet, three services

Consultations, tests and medicines all draw from the same yearly balance.

Installation

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

Usage

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

export function Kicker() {
  return <Eyebrow lead="rule" tone="accent">First time here</Eyebrow>;
}

Examples

Leads

Plain, a hairline rule, or an icon before the text.

Plan details

How it works

Wallet · 2026

Covered by your employer

Tones

Tone colours only the rule or icon; the text stays text.subtle.

New this year

Recommended

Before you book

Cashless at this clinic

Pre-approval needed

Inline

as="span" inside a flex row, next to a badge.

Wed · 20 MayCashless

Accessibility

No keyboard interaction of its own.

  • Not interactive and not a heading: it names a group without adding to the document outline. Put the real heading after it.
  • Capitals come from text-transform, so screen readers read the words, not letters. Write the source in sentence case.
  • The rule and icon are aria-hidden decoration; tone never carries meaning on its own.
  • Tracking is --syntara-font-tracking-caps: 0.08em for Latin pairs and 0 for Arabic-capable pairs, so joined scripts are never letter-spaced.

Guidelines

Do

  • Use one eyebrow per block, directly above the heading or figure it introduces.
  • Keep it to a few words: a category, a date, a status.
  • Use tone on the rule or icon to hint at the kind of note (accent for onboarding, warning for a caveat).

Don’t

  • Don't use it as a heading or as the only label for a section: screen readers skip it in the outline.
  • Don't write the text in capitals in the source.
  • Don't stack several eyebrows or put one above every line: it stops reading as a kicker.

API reference

Eyebrow

lead
'rule'

A short hairline dash before the text. Ignored when `icon` is set.

icon
ReactNode

Decorative icon before the text, about 1.25× the text size. Hidden from assistive tech.

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

Colours only the rule or icon (text.brand, accent.text or the feedback fg role). The label stays text.subtle.

as
  • pdefault
  • span

p above a heading or section; span inside other text or flex rows.

childrenRequired
ReactNode

Two to four words. Write it in sentence case; CSS sets the capitals.

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.

Colour4
text.subtletext.brandaccent.textfeedback.*.fg
Type4
font-size.xsfont-weight.mediumfont.tracking.capsline-height.snug
Space and size3
space.2space.4icon-stroke