Button

const PreviewEn = () => {
  return <Button>My button</Button>;
};

render(<PreviewEn />)

Use Button when

• a concrete action needs to be performed, for example saving or submitting a form
• the state of the solution changes, for example when opening a dialog or starting a process

Avoid Button when

• navigating to other pages or out of the service, use Link instead
• filtering information, for example in lists or tables, use Chip instead
• showing which filters are selected, use Chip instead

Examples

Emphasis levels

We use different button variants to emphasise certain actions. The primary, secondary and tertiary variants show how important the action is, and help users understand what should be prioritised.

const Variants = () => {
  return (
    <>
      <Button variant='primary'>Primary</Button>
      <Button variant='secondary'>Secondary</Button>
      <Button variant='tertiary'>Tertiary</Button>
    </>
  );
};

render(<Variants />)

Primary
Used for the most important action for the user, for example “Save”, “Next” or “Submit”. There should normally only be one primary button per page.

Secondary
Used for actions that are not the main action. It often appears next to a primary button — if the primary button is “Save”, the secondary button might be “Cancel”.

Tertiary
More discreet than the secondary button. Often used together with a primary or secondary button for less important actions. If used alone, it should include an icon, otherwise it may be difficult to recognise as a button.

Colours

A group of buttons should use the same colour variant.
The exception is when you want to highlight an action that cannot be undone, such as “Delete”. Otherwise, different colour variants should normally not be combined.

The button is available in all colours from your theme.

const ColorVariants = () => {
  const colorVariants = [
    'accent',
    'brand1',
    'brand2',
    'brand3',
    'neutral',
    'danger',
  ];

  return (
    <>
      {colorVariants.map((color) => (
        <Button
          key={color}
          data-color={color as ButtonProps['data-color']}
          variant='primary'
        >
          {color}
        </Button>
      ))}
    </>
  );
};

render(<ColorVariants />)

A group of buttons should use the same colour variant. The exception is when you need to highlight an action that cannot be undone, such as “Delete”. Otherwise, different colour variants should generally not be mixed.

const CombinedColorsEn = () => (
  <>
    <Button variant='primary' data-color='neutral'>
      Publish
    </Button>
    <Button variant='secondary' data-color='neutral'>
      Save draft
    </Button>
    <Button variant='tertiary' data-color='danger'>
      Delete
    </Button>
  </>
);

render(<CombinedColorsEn />)

Icons

Button can have an icon placed either to the left or the right of the text. As a general rule, we recommend placing the icon on the left. Icons inside buttons automatically get spacing to the text.

const IconsEn = () => (
  <>
    <Button icon aria-label='Icon only'>
      <PencilWritingIcon aria-hidden />
    </Button>
    <Button>
      <PencilWritingIcon aria-hidden />
      Edit
    </Button>
  </>
);

render(<IconsEn />)

Icon-only buttons

Use icon-only buttons only for well-known icons such as “Close” and “Delete”. When the button has no text, you must add an accessible label describing what it does. This can be added via title, aria-label, or a Tooltip.

Button with text and icon

When using an icon together with text, the icon should have aria-hidden so screen readers don’t read unnecessary content.

Icon placement depends on the context and the meaning:

• In most cases, left is the best placement.
• If the button says “Start” and has an arrow pointing right, it is natural for the arrow to be on the right.
• If the button is fixed on the right side of the interface, placing the icon on the right can be more intuitive.

Use only one icon per button.

Button styled as a link

Links can be styled to look like a button, but consider whether the Link component is a more appropriate choice.

const AsLinkEn = () => (
  <Button asChild>
    <a target='_blank' rel='noreferrer' href='https://www.designsystemet.no'>
      Go to designsystemet.no
    </a>
  </Button>
);

render(<AsLinkEn />)

Loading buttons

When showing that the button is loading something, you can combine it with a spinner.

const LoadingEn = () => (
  <>
    <Button variant='primary' loading>
      Loading…
    </Button>
    <Button variant='secondary' loading>
      Loading…
    </Button>
    <Button variant='tertiary' loading>
      Loading…
    </Button>
  </>
);

render(<LoadingEn />)

Guidelines

Buttons have an important function and are directly tied to an action. They give the user the ability to complete tasks.

Button placement

When placing buttons next to each other, the primary button should come first. The exception is “Previous” and “Next” — in that case, the secondary “Previous” button should come first.

One action per button

Clearly describe what the button does. A button should perform only one action, not several.

One primary action per page

There should be only one primary button per page. If there are multiple main actions, users may become unsure of what to do.

Text

All buttons on the same page should have unique button text.

Button text should be short, ideally no more than two, at most three words. The text should clearly describe what happens when the user clicks the button.

Use verbs in the imperative form on buttons to show users that they can perform an action. Examples of the imperative form are “send”, “sign”, “change”.

Avoid mixing writing styles. Use a capital letter only for the first word, as in a normal sentence. Do not use all-uppercase text, as it is harder to read.