Skip to content

Button

Status: Stable

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.

Examples

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'TUse punctuation or more than 4 words in label.
DON'TSkip 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'TUse the lock icon to indicate security if NerdWallet can’t promise security.
DOUse 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'TUse 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'TUse multiple primary buttons when actions could be prioritized.
EXCEPTIONUse multiple primary buttons when hierarchy of action is parallel.

Accessibility

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".

Development

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.

  • Use this component (<Button>) when you want something that looks like a button.
  • Use <Link> when you want something that looks like a link.

Props

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

<Button>

block

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

children

Required
ReactNode

className

Deprecated
string
Applies a CSS classname to the component.

component

"a" | "abbr" | "address" | "animate" | "animateMotion" | "animateTransform" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "circle" | "cite" | "clipPath" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "defs" | "del" | "desc" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "ellipse" | "em" | "embed" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "fieldset" | "figcaption" | "figure" | "filter" | "footer" | "foreignObject" | "form" | "g" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "image" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "line" | "linearGradient" | "link" | "main" | "map" | "mark" | "marker" | "mask" | "menu" | "menuitem" | "meta" | "metadata" | "meter" | "mpath" | "nav" | "noindex" | "noscript" | "object" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "path" | "pattern" | "picture" | "polygon" | "polyline" | "pre" | "progress" | "q" | "radialGradient" | "rect" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "stop" | "strong" | "style" | "sub" | "summary" | "sup" | "svg" | "switch" | "symbol" | "table" | "tbody" | "td" | "template" | "text" | "textPath" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "tspan" | "u" | "ul" | "use" | "var" | "video" | "view" | "wbr" | "webview" | ComponentClass<any, any> | FunctionComponent<any>
Allows you to provide a React component or other HTML element, overriding the default `a` and `button` options.

disabled

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

href

string
Url to navigate to when clicked

loading

boolean
Renders a button loading visual state.

loadingMessage

string
Message to be read by the screen reader when loading state is active.

onClick

(e: MouseEvent<HTMLElement, MouseEvent>) => void
Function to be called when button is clicked.

primary

boolean
Renders a button with the highest visual affordances.

style

Deprecated
CSSProperties
Applies a style object to the component.

tertiary

boolean
Renders a button with the tertiary visual affordances.

ref

(instance: any) => void | RefObject<any>