Accented

Inline text with an accent color, used to draw the eye to a key noun or phrase inside body copy. Renders as a <span> and inherits surrounding typography — only the color changes.

When to use

• For the most important noun in a sentence ("Welcome to Acme").
• For inline status accents inside metadata strips ("Updated just now").
• Inside a Heading when one word should pop without changing the heading's level.

When not to use

• For body emphasis where italics or bold reads better (<em> / <strong>).
• As a structural element — Accented is decorative; don't rely on its color to convey state.

Installation

pnpm add @nordcom/nordstar-accented

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

Basic usage

Without a color prop, Accented falls back to its theme's default accent — useful inside contexts that already pick a brand-aligned color.

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

export default function Example() {
    return (
        <p>
            This text is using the regular body color <Accented>while this is accented</Accented>, neat.
        </p>
    );
}

Colors

Pick from the system's palette. primary and secondary are the brand accents; foreground snaps to the maximum-contrast text color (useful inside colored surfaces).

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

export default function Example() {
    return (
        <p>
            This text is using the regular body color <Accented color="primary">while this is accented</Accented>, neat.
        </p>
    );
}

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

export default function Example() {
    return (
        <p>
            This text is using the regular body color <Accented color="secondary">while this is accented</Accented>,
            neat.
        </p>
    );
}

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

export default function Example() {
    return (
        <p>
            This text is using the regular body color <Accented color="foreground">while this is accented</Accented>,
            neat.
        </p>
    );
}

Composition

Use Accented inside a Heading to call out a single noun without breaking the heading's outline level:

<Heading level="h1">
    Build with <Accented color="primary">Nordstar</Accented>
</Heading>

Or inside a Label for inline metadata accents:

<Label>
    <Accented color="primary">New</Accented> · Released today
</Label>

Props