Button

Buttons indicate to a user that an important action is available (e.g., start a flow, proceed to next steps, send your info, save for later). Button hierarchy helps communicate the importance of one action vs. another.

<Cluster spacing={4}>
  <Button primary>Text</Button>
  <Button>Text</Button>
  <Button tertiary>Text</Button>
</Cluster>

() => {
  const [loading, setLoading] = React.useState(true);
  const toggleLoading = () => setLoading((l) => !l);
  return (
    <Cluster spacing={4}>
      <Button primary loading={loading} onClick={toggleLoading}>
        Text
      </Button>
      <Button loading={loading} onClick={toggleLoading}>
        Text
      </Button>
      <Button tertiary loading={loading} onClick={toggleLoading}>
        Text
      </Button>
    </Cluster>
  );
};

<Cluster spacing={4}>
  <Button disabled primary>
    Text
  </Button>
  <Button disabled>Text</Button>
  <Button disabled tertiary>
    Text
  </Button>
</Cluster>

DON'TUse punctuation or more than 4 words in label.

DON'TSkip a label.

DON'TUse the lock icon to indicate security if NerdWallet can’t promise security.

DOUse an icon to signify "open a new window".

Only show a loading state if it isn’t possible for a user to do something else while the action processes.

DON'TUse button loading state when the user could do something else.

DON'TUse multiple primary buttons when actions could be prioritized.

EXCEPTIONUse multiple primary buttons when hierarchy of action is parallel.

Users may quickly tab through a page to discover interactive elements, or use the VoiceOver rotor to get a list of all buttons on the page. This means it's important that a button's label is descriptive of what the button actually does, since it's not guaranteed that the user will encounter your button in the context of adjacent labels or descriptions. Instead of button labels like "Read more" or "Apply now", you should prefer more descriptive ones like "Read more about robo-advisors" or "Apply now on Chase's site".

You often want a button that looks like a link, or vice-versa a link that looks like a button. The <Button> and <Link> components can be used interchangeably, and which one you use should be determined by what you want it to look like. Both components can render either <a> or <button> tags depending on the props used (href vs onClick), ensuring you get both the right styling and the right DOM elements for semantics and accessibility.

In addition to props defined by this component, any props <button> and <a> take are also accepted.