Button

This component is used to render buttons. Buttons come in different sizes and styles and can be used for different purposes.

Button Types

Depending on what purpose the button should serve it needs to be of a certain visual appreance. For that there are several supported button types. Here is a quick overview of the supported types.

Primary Buttons

A primary button should be reserved for the main action on a page. This is the button we want the user to click the most. It draws the users attention through its unique color and style and should only be used once per page. An online shop for example should declare the "sale"-button or "add to cart"-button as primary.

<Button buttonType="primary" onClick={(e) => console.log("click", e)}>
  Primary Button
</Button>

Secondary Buttons

Secondary buttons should be used for all notable actions on a page except for the most important one (where you should use a primary button instead).

<Button buttonType="secondary" onClick={(e) => console.log("click", e)}>
  Secondary Button
</Button>

Ghost Buttons

We decided to not have ghost buttons as they can be tricky to get to be visible on different kinds of backgrounds.

Unstyled Buttons

For very special cases where semantically a button is needed but it should not look like a button at all, you can use the unstyled button type. This is just a button where all the styling is removed.

<Text>Do not click on this:</Text>
<UnstyledButton onClick={(e) => console.log("you never obey, you rascal you", e)}>
  <Text priority="accent">Unstyled Button</Text>
</UnstyledButton>

Do not click on this:

Flat Buttons

A flat button doesn't really appear like a button but more like a link except for the text style that it shares with the other buttons. Other than that it has no additional styling like for example a border or a background color. The flat button should be used for the least imporant actions that don't need much attention drawn to them.

<Button buttonType="flat" onClick={e => console.log("click", e)}>
  Flat Button
</Button>
<Spacings.Inset style={{ backgroundColor: "black" }}>
  <Button
    buttonType="flat"
    isOnDarkBackground
    onClick={e => console.log("click", e)}
  >
    Flat Button
  </Button>
</Spacings.Inset>

Button Sizes

A button can be of different sizes:

In 95% of the cases the default size should be fine. Always ask your self if you really need a bigger button. What is it competing with in terms of importance and priority? With another primary button? Then that other primary button should rather be deemphasized to a secondary button instead.

Bigger button size should be reserved for Landing Pages where there is a single most important and maybe even the only action to do on that page.

Disabled state

A button can be disabled, that means that nothing happens if the user clicks on the button, i.e. the onChange handler will not be called. The disabled state is indicated with a gray background. You can set this state via the optional isDisabled prop, which expects a boolean.

Loading state

Use the isLoading prop to indicate that the button triggered an asynchronous task that is going on.

<Button buttonType="primary" isLoading onClick={(e) => console.log("click", e)}>
  Loading Button
</Button>

Accessible Loading State

In order to give folks using a screen reader an indication of the loading process it's recommended to also provide a loading text that is invisible but read out by the screen reader.

<Button
  buttonType="primary"
  isLoading
  loadingText="Form is being submitted"
  onClick={(e) => console.log("click", e)}
>
  Loading Button
</Button>

Button refs

If you need to apply a reference to the button element, then you can do so using the ref prop. This property has to be a function that takes the button reference as its single argument.

How to use it

To render a simple button you just have to give a text for the button as child to the component.

<Button onClick={(e) => console.log("click", e)}>My first button</Button>

Button Types

The types of the button mentioned above can be set with the buttonType property:

<Button buttonType="primary" onClick={(e) => console.log("click", e)}>
  Primary Button
</Button>

Disabled buttons

<Button isDisabled onClick={(e) => console.log("click", e)}>
  Disabled Button
</Button>

Button scales

Buttons can be rendered with different sizes as mentioned above. The scales are the same as in the Spacings-component.

To apply size to a button you can use the scale-prop.

<Button
  scale="big"
  buttonType="secondary"
  onClick={(e) => console.log("click", e)}
>
  Wow, a big button!
</Button>

Button with icon

Buttons can be rendered with different sizes as mentioned above. The scales are the same as in the Spacings-component.

To apply size to a button you can use the scale-prop.

<Button onClick={(e) => console.log("click", e)} icon={<CloseIcon />}>
  <Spacings.Inline alignItems="center">
    <span>Button with icon</span>
    <ChevronRightIcon />
  </Spacings.Inline>
</Button>

How the component works internally

This Button-component internally uses the Text-component with a textStyle of Button and the Spacings-component for rendering the button in different sizes.