Demo

Variants

Primary

For best UI/UX practices try to only use one primary button per page (or a maximum of two clearly separated by concern) to denote the most important/common/desired action to the user.

Examples of this include:

• Global actions (e.g. a "New" button in the sites header on every page)
• Save or continue buttons in forms
• A primary adornment in a list of actions

Try not to use primary buttons for:

• Selected states
• Liberally on a single or multiple pages
• Every button 😱

Secondary

For everything else, there's secondary. This should be your "go to" in nitpick for anything that isn't important enough to be a primary action. If you have a document UI akin to Google Docs then every button that isn't "share" along your header is going to be a secondary.

Outlined

Outlined buttons in the eyes of nitpick exist for convenience for the developer, but are rarely used. That doesn't mean you shouldn't of course!

You may want an outlined button for:

• Call To Action elements
• Denoting a third option apart from a primary and secondary (tertiary, if you will)
• Stylistic purposes

Try not to:

• Overly mix all three button styles in an application UI
• Have no real functional difference between the three on the page where using two was easily as possible.

Flat

"Flat" buttons are often used as part of CTA's or a positively encouraged action to the user. They're perfect for overlaying on top of other colourful elements as images as their low styling option allows them to be made transparent and to fit in with the background.

Danger

This one's easy, don't delete your account by accident! Use this for destructive actions.

Text

A text button is for when you want a button that looks just like a bit of text but retains the spacing of the button style. It happens.

Icons

Use the icon
prop to add an icon to your button. This can be used with any variant, and its placement controlled with the iconPlacement
prop.

Loading

The loading variant lets you quickly turn a button into a disabled loading state.

While the button is in the loading state, it will be disabled and the text will be replaced with a loading spinner without it resizing the button.

You cannot click or interact with the button while it is in the loading state.

Shimmers

A shimmer is a great way to draw attention to a button that is waiting for user input. This is useful when a form has been completed and is awaiting submission.

This is used for example by Stripe in their new checkout experience, where the button always appears "enabled" but begins to "shimmer" when the checkout form becomes valid.

Sizes

You can also specify the size of your button.