Button

The <Button /> component is an interactive element allowing users to perform an action, navigate to a page, or change a view. The button's label helps inform what action will occur when the user interacts with it.

The button has four available tones, each with a specific use case in mind.

Show codeCopy code

The primary button is used for interactions where the most emphasis is required. Avoid using more than one primary button in a scene at any one time.

The critical button is used for destructive primary actions, e.g. to confirm deletion of user data. As this type of action requires the most emphasis — just like the primary — avoid using critical and primary buttons grouped next to each other.

When an interaction requires less emphasis the neutral button can be used to draw less attention from the user. Commonly used in conjunction with one primary button, to indicate one or more secondary actions.

Use the ghost button when you don't need any particular emphasis on the action to draw the users' eye. A good use case is the "Close" action of a modal, or an "Open menu" action — the user can expect where these actions might be located and therefore no emphasis is required. The ghost button is also great for cases where a lot of actions would be rendered in close proximity to each other, e.g. to trigger a "More options" menu in a table row.

There are two button sizes, small and medium (default).

Show codeCopy code

This size is used along with other ‘small’ components or where the default sizing appears too large.

This is the default size for buttons and to be used along with other ‘medium’ components.

Use the block prop to make the button fill its container's width.

Show codeCopy code

Icons can be used next to labels to help clarify an action.

Pass in the icon component via the icon prop. Default icon placement is left, but you can override this using iconPlacement prop.

Show codeCopy code

If buttons containing icons are placed next to each other, both buttons should have the icon placed on the same side.

Show codeCopy code

In some cases button text is not necessary to clarify an action. Visually hide the label using the iconOnly prop. A label must still be provided for assistive technologies.

Show codeCopy code

The loading prop sets the button to the loading state, which will also automatically disable the button. Any icon and/or text label will get an opacity: 0-style, so the width of the button remains the same.

Show codeCopy code

The disabled prop prevents the user from activating the button and styles it appropriately.

Show codeCopy code

Any function passed to the onClick prop is called when the button is activated.

It passes the React Mouse event as a parameter.

Show codeCopy code

The type prop is used to set the button's native type attribute. This is useful when you need to submit a form, or reset it.

Show codeCopy code

If you need the button to natively act like a link (<a href>) you can use the <ButtonLink /> component. This gives you an anchor element but with the styles and prop logic of the <Button /> component.

Like the Link component, the button link also supports any global link override passed down via the <Core /> context. See an example of this at Global link override. You can also use the shouldIgnoreCoreLinkComponent prop when need to "ignore" the override for specific instances.

Show codeCopy code

When using a global link override in your <Core /> and you need to pass any prop overrides for a specific instance of a <ButtonLink /> in your app (ie not in your <Core />), you can use the providerOverrides prop.

Pass in an object with the props from your chosen routing framework's link component that you wish to override. The example below shows how you can override for example the scroll prop when using next/link, and also how to implement their exported type to make it type-safe.

import { LinkProps as NextLinkProps } from 'next/link';

<ButtonLink<Partial<NextLinkProps>>
  providerOverrides={{ scroll: false }}
  label="Customers"
  href="/customers"
  tone="neutral"
  size="small"
/>

In cases where you need a button visually inside a component, particularly an input, we have a dedicated component called <AdornmentButton />. This is primarily an internal helper used to build other components like SearchInput, which uses a close icon in the button, to clear the input's value.

Important to note that the adornment button relies on the inputSize being passed through, as its pressable area should be as tall as the height of the input.

The adornment button also supports children, for when you need a visual text label e.g.

Show codeCopy code

The <CustomButton /> component is a utility component for building case-specific buttons that require more content than simply a label and/or an icon, e.g. the <SelectDropdownButton /> and <AllFiltersButton /> buttons.

Some of its features are:

• Label content is passed via children, that accepts any StrictReactNode.
• Only supports neutral or ghost tone.
• Override padding styles with the paddingLeft and paddingRight props.

NOTE: It's important to not pass any interactive elements as children, as this will cause unexpected focus stops. Avoid using this component unless absolutely necessary, always prefer to use the <Button /> component instead.

Show codeCopy code