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.
Variants
Priority
- Primary buttons are used very sparingly (ideally one per page) to ensure they make a strong impact.
- Several secondary and tertiary buttons can be used per page and help differentiate between next steps (e.g., 'compare' vs 'apply now').
Loading
- Only use button loading states if it isn’t possible for a user to do something else while the action processes.
Development
import Button from '@nerdwallet/react-button';<Button>Click me</Button>;Props
<Button>
children
node
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