Button

Unable to parse html

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

render(<PreviewEn />)

Usage

The class name ds-button is set on <button>.

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

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit the closest parent where these are set.

Example

Variants

variant is used to change the appearance of the button.

Unable to parse html

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

render(<Variants />)

Icon

If you only have an icon in the button, you can set data-icon="true" to make it square. If you have other content, such as text, the button will automatically get spacing around the icon.

Unable to parse html

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

render(<IconsEn />)

Buttons that load

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

Note: Neither aria-busy 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.

React

In React, we also set type="button" by default, to avoid unexpected submits in forms.

Extra logic for buttons that load

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

Unable to parse html

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.

Button as link

Links can be styled to look like a button, but consider whether the Link component is a better choice first. To change the button to a link, use asChild. Read more about composition in Designsystemet.

Unable to parse html

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

render(<AsLinkEn />)