Components Primitives
Eyebrow
Introduce a headline with a short context label and an optional decorative dot.
On this page
Examples
A simple discipline label. The longer seed text demonstrates natural wrapping at word boundaries.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { EyebrowLabel } from '@coreux/ui';
export default function Plain() {
return (
<div style={{ background: '#F4F1E9', padding: 24 }}>
<EyebrowLabel>Strategy / Product / Engineering / Automation</EyebrowLabel>
</div>
);
}
Usage
Use EyebrowLabel for a brief category or context line above a headline. The Plain seed shows multiple disciplines; WithDot emphasizes one category; OnDark places an ivory label and dot on a navy surface.
The dot is decoration, not a status control. Keep meaningful words such as “Strategy” or “Founder POV” visible even when a color suggests a category. This component does not implement selected, disabled, loading, or live status states.
Pass a real CSS color to dotColor, such as #2457F5 or var(--ds-core-cobalt). A class such as bg-core-cobalt or a bare token name does not resolve here. Color values are not validated.
Props
| Prop / type | Default | Description |
|---|---|---|
childrenRequiredReactNode | Required | Required React content. Prefer brief meaningful text; rendered inside a span, not a heading. Visually uppercase with 12 px monospace text at a 16 px root. |
dotColorstring | undefined | CSS backgroundColor for an 8 px decorative circle; omitted when undefined. Supply a hex, rgb(), or var() color, not a Tailwind class or a bare token name. No validation. |
tone"ink" | "ivory" | "ink" | ink uses navy text; ivory uses warm ivory. Does not add a background or change dotColor. |
classNamestring | undefined | Classes merged with cn onto the root element. Other HTML and ARIA attributes are not forwarded; supply semantics on a wrapper. |
Accessibility & layout
The component renders an inline-flex span and real child content. Its optional 8 px dot has aria-hidden="true"; the text remains available to assistive technology. It does not provide heading semantics or a live region. Put those semantics on a surrounding element if needed.
Text is visually uppercased in 12 px medium monospace with wide tracking at a 16 px root. It can wrap at word boundaries within the available width, but long unbroken content can overflow. There is no automatic truncation, scaling, or responsive breakpoint. Keep labels concise and check the actual text at narrow widths.
The ivory tone changes text only. Supply a contrasting dark background as OnDark does; tone does not alter dotColor. Do not rely on the dot alone to explain meaning.
Pair a label with a BrandWordmark for identity or a StatBlock for a numeric proof point.
Consumer setup
Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.
Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.
The quick start walks through a copied StatBlock in a minimal app.
Source & revision
This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.
Revision and upgrade notes · Contribution and coverage guide
View EyebrowLabel source (repository access required)