Label

Small uppercase text used for captions, form labels, and tag-like microcopy. Carries a typographic role rather than a semantic one — pair it with the right element via the as prop when the role matters.

When to use

• For inline captions next to images or media.
• For form labels when not using Input's built-in label prop.
• For metadata strips ("4 min read", "Updated yesterday").
• As a navigation block heading inside a sidebar.

When not to use

• For section titles — that's Heading's job.
• For body emphasis — reach for Accented.

Installation

pnpm add @nordcom/nordstar-label

import { Label } from '@nordcom/nordstar';

Basic usage

import { Label } from '@nordcom/nordstar';

export default function Example() {
    return <Label>This is a label</Label>;
}

With a color

import { Label } from '@nordcom/nordstar';

export default function Example() {
    return <Label color="primary">This is a label</Label>;
}

Polymorphism

Label accepts as to render as any element. The most common use is wrapping a <Link> for navigation block headings:

<Label as={Link} href="/docs/components">
    Components
</Label>

The pattern appears in this docs site's own sidebar.

Composition

A label above a form control is a robust, framework-agnostic alternative to Input's built-in label prop — useful when you need the label to share styling with other labels on the page, or when the input lives inside a custom wrapper. Just make sure the association is real (use htmlFor on the label, id on the input).

<>
    <Label as="label" htmlFor="company">
        Company
    </Label>
    <Input id="company" type="text" />
</>

Props

Accessibility

• All-caps text reads slowly for users with cognitive load — keep label copy short.
• Don't make labels the only conveyer of state ("REQUIRED" — pair with * or another visible cue).