Eyebrow

A small label above a heading, for section tags and category kickers.

Last updated

New

Show code
<Eyebrow>New</Eyebrow>

Add

npx @ava-ui/apogee add eyebrow

No Apogee dependencies.

Usage

---
import Eyebrow from '@/components/apogee/Eyebrow/Eyebrow.astro'
---
<Eyebrow>Case study</Eyebrow>
<h2>How Larkspur cut checkout time in half</h2>

API

@composable — exposed to Content Editors in AVA. Any other native attribute for the rendered tag (e.g. id) passes through.

Prop Type Default Description
as 'p' | 'span' | 'div' 'p' Tag to render.
color 'primary' | 'neutral' | 'neutral-faded' | 'critical' | 'positive' | 'warning' 'primary' Text colour.
size 'small' | 'medium' | 'large' 'medium' Text size.
weight 'regular' | 'medium' | 'semibold' 'medium' Font weight.
uppercase boolean true All caps with letter-spacing; false keeps the text as written.
class string — Extra classes, merged last.

Variants

Small

Medium

Large

Sentence case

Regular

Semibold

Show code
<Eyebrow size="small">Small</Eyebrow>
<Eyebrow>Medium</Eyebrow>
<Eyebrow size="large">Large</Eyebrow>
<Eyebrow uppercase={false}>Sentence case</Eyebrow>
<Eyebrow weight="regular">Regular</Eyebrow>
<Eyebrow weight="semibold">Semibold</Eyebrow>

Colours:

Primary

Neutral

Neutral faded

Critical

Positive

Warning

Show code
<Eyebrow>Primary</Eyebrow>
<Eyebrow color="neutral">Neutral</Eyebrow>
<Eyebrow color="neutral-faded">Neutral faded</Eyebrow>
<Eyebrow color="critical">Critical</Eyebrow>
<Eyebrow color="positive">Positive</Eyebrow>
<Eyebrow color="warning">Warning</Eyebrow>

inherit takes the colour of the text around it:

Inherits critical

Show code
<p class="text-critical"><Eyebrow color="inherit">Inherits critical</Eyebrow></p>

States

Static: no interactive states.

Examples

Inline, ahead of a heading (as="span" when it must sit inside other flow content):

<Eyebrow as="span">Update</Eyebrow> Apogee 2.0 is out

Accessibility

Native semantics, no extra ARIA needed. It’s plain text — pick as to fit the surrounding document outline (e.g. span inside a heading, not a block-level p).

Tokens

Token Used for
--foreground-{hue} Text colour for the chosen color
--foreground-neutral-faded color="neutral-faded"

Do / Don’t

  • Do keep it to one short word or phrase (“New”, “Case study”, “Step 1 of 3”).
  • Do pair it with a heading directly below — it’s a kicker, not a standalone label.
  • Don’t end it with punctuation.
  • Don’t use it as a substitute for a real heading level — it carries no heading semantics.

Content

  • All caps is applied by CSS (uppercase) — write the text in normal sentence case or title case, not literal caps.
  • One to three words. No ending period.

Related

HeadingA semantic, fluid-sized heading — pick the tag with `as`, the visual size with `size`.
TextBody copy with a size scale and semantic colours. Renders p, span, or div.
SectionHeaderEyebrow, heading and description at the top of a section or an app page, with actions, a divider and the level, alignment and colours every section shares.