---
title: "Eyebrow"
description: "A small label sitting above a heading, optionally paired with a call to action."
canonical_url: "https://sanity-id-docs.sanity.build/sanity-id/components/eyebrow"
md_url: "https://sanity-id-docs.sanity.build/sanity-id/components/eyebrow.md"
docs_index: "https://sanity-id-docs.sanity.build/sanity-id/llms.txt"
version: "1.15.2"
---

> Part of the Sanity ID reference. The index of every page is at https://sanity-id-docs.sanity.build/sanity-id/llms.txt.

# Eyebrow

A small label sitting above a heading, optionally paired with a call to action.

```tsx
import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `children` | `ReactNode` | no | — | Label text content |
| `className` | `string` | no | — | Additional CSS classes |
| `cta` | `{ as?: E; text: string; href?: string; arrow?: LinkCTAProps<E>["arrow"] }` | no | — | Optional CTA link rendered alongside the label |

## Usage

```tsx
import { Eyebrow } from "@sanity/sanity-id/components/eyebrow"

export default () => {
	return (
		<div className="flex flex-col gap-y-32">
			<Eyebrow>Eyebrow</Eyebrow>
			<Eyebrow cta={{ text: "With link CTA", href: "#eyebrow" }}>
				Eyebrow
			</Eyebrow>
		</div>
	)
}
```