# Eyebrow

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

URL: https://apogee.avaui.dev/docs/eyebrow
Last updated: 2026-10-16

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

Last updated October 16, 2026

```astro
<Eyebrow>New</Eyebrow>
```

## Add

```sh
npx @ava-ui/apogee add eyebrow
```

No Apogee dependencies.

## Usage

```astro
---
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

```astro
<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:

```astro
<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:

```astro
<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):

```astro
<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\`.

](https://apogee.avaui.dev/docs/heading)[

TextBody copy with a size scale and semantic colours. Renders p, span, or div.

](https://apogee.avaui.dev/docs/text)[

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.

](https://apogee.avaui.dev/docs/section-header)