Button

An interactive control for triggering actions — submitting a form, opening a dialog, navigating somewhere, or running any user-initiated command.

When to use

Whenever the user needs to do something: submit, save, cancel, open, retry.
For inline actions inside cards, headers, or forms.
For destructive actions (combined with an appropriate color).

When not to use

For navigation between pages — use a styled <a> (or Header's menu links) so the URL is real.
For toggling boolean state in a form — use a checkbox or switch instead.

Installation

pnpm add @nordcom/nordstar-button

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

You can also import the standalone package directly if you don't pull in the umbrella, but the umbrella tree-shakes the same code.

Basic usage

A button always renders as a real <button> element by default. Pass children for the label and any standard HTML button props (onClick, type, form, etc.).

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

export default function Example() {
    return <Button>Save to Drafts</Button>;
}

Variants

Two visual variants — outline (the default for emphasis-light contexts) and solid (filled). Pair with a color to escalate emphasis.

variant="outline"

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

export default function Example() {
    return <Button variant="outline">Save to Drafts</Button>;
}

color="primary"

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

export default function Example() {
    return <Button color="primary">Save to Drafts</Button>;
}

variant="outline" color="primary"

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

export default function Example() {
    return (
        <Button color="primary" variant="outline">
            Save to Drafts
        </Button>
    );
}

Disabled

Disabled buttons don't fire onClick and are removed from the keyboard tab order. Use them sparingly — usually only when the user has just submitted and you're waiting for a response.

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

export default function Example() {
    return <Button disabled>Save to Drafts</Button>;
}

With an icon

Pass any node to icon. The button arranges it next to the label automatically.

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

export default function Example() {
    return (
        <Button
            icon={
                <svg aria-hidden="true" fill="currentColor" viewBox="0 0 1024 1024">
                    <path d="M624 706.3h-74.1V464c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v242.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.7a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9z" />
                    <path d="M811.4 366.7C765.6 245.9 648.9 160 512.2 160S258.8 245.8 213 366.6C127.3 389.1 64 467.2 64 560c0 110.5 89.5 200 199.9 200H304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8h-40.1c-33.7 0-65.4-13.4-89-37.7-23.5-24.2-36-56.8-34.9-90.6.9-26.4 9.9-51.2 26.2-72.1 16.7-21.3 40.1-36.8 66.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10C846.1 454.5 884 503.8 884 560c0 33.1-12.9 64.3-36.3 87.7a123.07 123.07 0 01-87.6 36.3H720c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h40.1C870.5 760 960 670.5 960 560c0-92.7-63.1-170.7-148.6-193.3z" />
                </svg>
            }
        >
            Download
        </Button>
    );
}

Composition

Buttons combine cleanly with Card and Header:

<Card>
    <Card.Header>Settings</Card.Header>
    <Card.Divider />
    <p>Update your account preferences.</p>
    <Button color="primary">Save changes</Button>
</Card>

Props

Prop	Type	Default	Description
as	As \| undefined	—	—
color	NordstarColor \| undefined	—	—
contentClassName	string \| undefined	—	—
disabled	boolean \| undefined	—	—
icon	string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<AwaitedReactNode> \| null \| undefined	—	—
iconClassName	string \| undefined	—	—
variant	"outline" \| "solid" \| undefined	—	—

Accessibility

Always provide a meaningful label — either visible text or, for icon-only buttons, an aria-label.
Use type="submit" only on the primary form action; secondary actions should set type="button" to avoid accidental submits.
For destructive actions, pair the color with explicit confirmation copy ("Delete account" reads more clearly than "Confirm").