Button

Status: Stable

Latest released: March 2020

Current version: v9.10.2

Storybook
GitHub

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.

Hero Image

  1. Button copy: encourages the user to take action.

Variants

Default

Loading

Disabled

Design guidelines

Be clear and use copy to motivate action

  • Be succinct; try not to use more than 4 words.
  • Don’t use punctuation.
  • Button copy is written in all caps.
Don't
Use punctuation or more than 4 words in label.
Don't
Skip a label.

Use icons thoughtfully

  • An icon is allowed to use on a button to signify what the button does.
  • The lock icon indicates security to the user (Learn more). Check with legal when you are using it.
  • Do not use the lock icon if the user will leave NerdWallet after clicking on the button (legally NerdWallet can’t promise security).
Don't
Use the lock icon to indicate security if NerdWallet can’t promise security.
Do
Use an icon to signify "open a new window".

Use loading states sparingly

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

Don't
Use button loading state when the user could do something else.

Primary, secondary, tertiary button usage

  • Primary buttons should be used very sparingly (ideally one per page) to draw user’s attention to highest priority action.
  • Several secondary and tertiary buttons can be used per page and help differentiate between next steps.
Don't
Use multiple primary buttons when actions could be prioritized.
Exception
Use multiple primary buttons when hierarchy of action is parallel.

Development

import Button from '@nerdwallet/react-button';
<Button>Click me</Button>;

Props

<Button>

children

node

Required

block

boolean

Changes the button to `display: block`, making it go full width.

Default

false

className

string

Applies a CSS classname to the component.

Default

null

component

string

Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.

Default

null

disabled

boolean

Renders a button as disabled, making it non-interactable.

Default

false

loading

boolean

Renders a button loading visual state.

Default

false

primary

boolean

Renders a button with the highest visual affordances.

Default

false

tertiary

boolean

Renders a button with the tertiary visual affordances.

Default

false

dangerouslyForceHoverStyling

boolean

Force the component to use its hover styles.

Default

false

dangerouslyForceFocusStyling

boolean

Force the component to use its focus styles.

Default

false

dangerouslyForceActiveStyling

boolean

Force the component to use its active styles.

Default

false

Related pages