Bain Logo


Jump to Props

Trigger actions based on a user's interaction.

You have two main options with the Button component:

  1. Type of button (with the variant prop)
  2. size of the button

As with most defaults in the ADAPT Design System, the Button comes with a 'sensible default', meaning unless specified by a designer, just use <Button>.


Types of Buttons

Use the variant prop to configure the type.

Which type/variant should I use?

The choice of which button type to use is up to the team to decide. There are however some recommended best practices below.

Size Variations

Buttons come in small, default (medium*) and large. Most of the time, you should use the default.

* Note: medium is the default button size – meaning you do not need to explicitly set it. If your use case requires you to conditionally set the button variant, you can optionally set medium as a prop if it makes better sense than an empty string.

Loading State

Set this if the button is loading. When isLoading is true, the content/text is hidden and a spinner is shown in its place. The button maintains the width that it would have if the text were visible.

Best Practices

  • Avoid using multiple primary buttons in a workflow
  • Button text should be written in sentence case
  • A button containing no text should be paired with a label or tooltip
  • Common button actions should be placed in a similar location from flow to flow, .e.g. “Export Report”, “Save Changes”, etc…
  • Don’t override default font size, space or color theme values


  • Props
  • Styled Functions

What happens when the user clicks the element

sizesmall | medium | largemedium

Alters the size of the button

variantdefault | primary | outline | transparent | destructivedefault

The visual look of the button


The content to show inside the button


Displays a loading spinner and disable the button


Sets the disabled attribute on the button

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy