Component

Eyebrow

Render compact section labels with mono text, uppercase rhythm, and predictable sizes.

Usage

Import the component entry and start with its smallest complete example.

import { Eyebrow } from "@chitrank2050/monoline-ui/eyebrow"

<Eyebrow size="sm">Foundations · Colors</Eyebrow>

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Eyebrow adds a short category or context label beside a heading or content block.

Avoid when

The text is the actual heading or needs more than a short contextual label.

Accessibility

Eyebrow is a span, not a heading. The associated section still needs a heading at the correct level.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

Props, slots, and callbacks available on this component.

sizexs | sm | mdLabel scale

childrenReactNodeShort uppercase label text

Theme variables this component reads for color, spacing, and motion.

--muted-foregroundCSS varEyebrow text colour

font-monoCSS varMonoline uppercase label face

The source used by the example above, including any state it needs.

import { Eyebrow } from "@chitrank2050/monoline-ui/eyebrow"

export function SectionLabel() {
  return <Eyebrow>Selected work · 04</Eyebrow>
}

Compare related components or review the package and theme setup.