Button

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

render(<PreviewEn />)

Usage

Examples

Variants

variant is used to change the appearance of the button.

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

render(<Variants />)

Colors

Either you set data-color directly on Button, or it inherits from the closest parent element with data-color.

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 />)

Icon

If you only have an icon in the button, you can set icon={true} to make it square. If you have other content, such as text, the button will automatically have air around the icon.

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

render(<IconsEn />)

Button as link

asChild is used to change the button to a link. Read more about composition in the Designsystem.

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

render(<AsLinkEn />)

Buttons that load

Below we use loading={true} to show that the button is loading something. Here you can also submit your own loading component if our Spinner does not fit.

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

render(<LoadingEn />)

In the example above, aria-disabled is automatically set when loading={true}. This is the recommended way to show that a button is disabled. Then the button can still get focus when the user navigates with the keyboard. This way, screen readers and other assistive devices are informed that the button exists, but that it is not active.

Note: Neither loading="true" nor aria-disabled automatically prevents the button from triggering onClick. You must ensure that the callback function does not run when the button is disabled.

HTML

The class name ds-button is set to <button>. In React, we also set type="button" by default, to avoid unexpected submits in forms.

There are three data attributes you can use for customization: data-icon - set if the button only has an icon. data-variant - set variant of the button (primary, secondary, tertiary). data-fullWidth - set if the button should be full width.

If you want a button that loads, you have to add a loading indicator yourself.

CSS variables and data attributes