Eyebrow

Hero example

When to use

Reach for <Eyebrow> when you need a label that sits above a section heading — "What's next," "Now shipping," "Inside the box." The 11px / 0.18em tracking / uppercase casing reads as a small structural beat that orients the reader before the heading lands. The 24px gap below is built into the recipe; consumers don't add one.

Don't reach for Eyebrow for body copy — it's labelling. Don't use it for status indicators (use Pill) or inline tags. For the brand-tier marketing eyebrow variant with the orange accent dot, use MatterEyebrow.

Anatomy

A single <div class="eyebrow"> (or .eyebrow.mono when mono is set) containing the children verbatim. The recipe in @matter/components/styles.css supplies:

• font-size: 11px
• letter-spacing: 0.18em (uppercase tracking)
• text-transform: uppercase
• color: var(--fg-muted)
• margin-bottom: 24px (the canonical gap to the heading below)

The mono flag swaps the font to Geist Mono and adjusts letter-spacing — for tabular numerics ("Q3 · 2026 · Equity") or code-flavored eyebrows.

Props

States

Stateless.

Density

Density-agnostic. The 11px / 0.18em letter-spacing is at the legibility floor — any compaction breaks it.

Themes

Tokens consumed

Color reads --fg-muted. Font, size, tracking come from the .eyebrow recipe (typography tokens).

Accessibility

• Keyboard interactions. None.
• ARIA roles and properties. Generic <div>. The text content carries the meaning; screen readers announce it inline before the heading.
• Focus order. N/A.
• Screen-reader expectations. Announces as plain text — "{eyebrow text}" — followed by whatever heading sits below.
• Reduced motion. N/A.
• Forced colors. Foreground → system foreground; tracking and uppercase casing preserved.
• WIG rules. Uppercase + 0.18em tracking meets WIG's mono-caps legibility minimum. The 24px below-margin maintains rhythm without inline spacing hacks.

Do / Don't

Recipes

This component appears in:

• The marketing site's section headers.
• Docs corpus recipe — section labels on document detail pages.

Code example

import { Eyebrow, DisplayHeading } from "@matter/components";

export function PricingSection() {
  return (
    <section>
      <Eyebrow>Pricing</Eyebrow>
      <DisplayHeading as="h2" size="hero">
        Pay only when an entity files.
      </DisplayHeading>
      {/* body */}
    </section>
  );
}

Source