Button

Buttons give people a way to trigger an action. They're typically found in forms, dialog panels, and dialogs. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus.

For more information about adding Dark Mode to the Button Component, please visit the Themes page.

• Interactive Playground
• Anatomy
• States
• Type
• Behavior
• Buttons Using Icons
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various button styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<button class="neo-btn neo-btn-primary neo-btn-primary--default">
  default
</button>

<Button>default</Button>

Each of the 4 button types are built using standardized parts as shown below. For each button, some parts are required, while others can be omitted as desired.

1

2

3

4

Each button can exist in one of 4 states. The button’s state will change as the user moves around the screen.

Default

Hover

Pressed

Disabled

• Default:

  This is the default state for the button. When nothing else is happening, it adopts the Normal state (sometimes called “Up”).

• Hover:

  When the user moves the mouse over the button, or when the button becomes the focus using the keyboard, its state changes to Hover. This lasts until the user moves off the button. While in the Hover state, use the Enter key, the Spacebar, or click the mouse button to launch the button’s action.

• Pressed:

  While the button's function is activated, it is displayed in the Pressed state.

• Disabled:

  This shows that the button cannot be used. Maybe a required field has not been filled in, or this action is not allowed with the currently selected options.

There are multiple variants for each button. The format and use of each is outlined below.

Primary

Secondary

Tertiary

• Primary:

  Use these buttons to perform the most important action item on the current page. For example, Save or Continue. Too many Primary buttons can be confusing for the user, so only include one Primary button on each screen or region.

• Secondary:

  Secondaries offer alternate or opposite actions to the Primary. For example, Cancel, Back, or Reset. Multiple Secondary buttons can be used with each Primary.

• Tertiary:

  Use them on their own or pair them up with other buttons. Tertiary buttons contain the least important action items on the page.

A Primary button should immediately draw the user's attention within the region containing the button. It indicates what needs to be done at any moment.

Text Label

The text on a button tells the user what action will be performed when activated. There is very little room, so whatever text you add must be clear, direct, short, and descriptive.

The text should not be a simple binary choice (e.g. Yes / No, True / False) but should refer to the action being performed (e.g. Save, Delete, Cancel, Restore, Continue).

DO: Use title case within the button text. Capitalize only the first letter of the button text unless it is a proper name. For example, Sign In.

DON'T: Do not use any other casing, except for Android applications where caplocks are used by default.

DO: Use actionable verbs to concisely describe the function that the button performs.

DON'T: Do not use generic terms to describe actions.

Color

The use of color in an interface can help users navigate a complicated path. Use color to make the most important bits stand out on the page (e.g. Primary button vs. Secondary button).

However, too much color has the opposite affect, camouflaging the important bits among a forest of distractions.

Use color sparingly to lead the user down the best path to success, showing where they need to go next.

Refer to the Accessibility section for more information on the proper use of color.

DO: Use colors to help convey the state where appropiate. Refer to the Colors guideline for additional information.

DON'T: Do not use color simply for decoration.

Arrangement

The purpose of highlighting an object (like a Primary button) is to draw the user’s attention to the key item on the screen. Too many highlights can be confusing for the user, making the important bit disappear into background noise.

For Primary buttons, only add one to each screen or region to keep the user’s attention properly focused.

DO: Use colors to help convey the state where appropiate. Refer to the Colors guideline for additional information.

DON'T: Do not use multiple primary buttons.

Compact Button

The Compact button is used like its larger cousins, but only where space is limited. It should never become the default button size for all applications.

DO: Use the default button size for most actions. Compact buttons can be used within text editors and message bubbles.

DON'T: Do not use compact buttons as the standard throughout the application.

Tooltip

These pop-ups are used to provide additional information on the function of a button.

Icon buttons should always have a Tooltip to explain the button’s action. The Tooltip replaces the button text.

Text buttons should seldom have a tooltip unless the text alone is not enough to explain the action.

DO: Use tooltips on icon buttons to provide additional context on the button’s function.

DON'T: Do not use tooltips on regular buttons, unless they are in a disabled state.

Disabled items should have tooltips that say why the object is not available.

DO: Use tooltips on icon buttons to provide additional context on the button’s function.

DON'T: Do not have a disabled button without having a tooltip that informs the user why it’s inactive.

Animation

Animations are like Color, in that they help to draw the user’s attention to something. And just like Color, overuse of animations makes everything seem important, so the impact is lost.

DO: Use pulsing buttons sparingly to focus the user’s attention on critical time sensitive items, such as incoming or active calls.

DON'T: Do not use pulsing buttons for decoration or to attract the user’s attention if it’s not critical.

Icons can be placed within the button to the left of the labels to clarify an action and call attention to a button. There are instances where an icon can be used without a text label, but use icon-only buttons cautiously.

Icons Inside Buttons

Icons may be included to the left of the button text if it will help the user. They should never be used for purely cosmetic purposes.

DO: Add an icon to a button if it will help the user to understand the attached function.

DON'T: Use icons for cosmetic purposes only. If it has no value, leave it out.

Icon Buttons

Buttons that contain only an icon and no text label can be used where the function of the button is clear from the icon. This can also be employed where space is limited. Generally, these should be used for control bars, or common and easily recognizable actions such as Close, Search, or expandable menus.

Primary, Secondary and Tertiary buttons have a default height of 36 pixels, icon only buttons are 32 pixels high, and compact buttons are 24 pixels high.

The width of all buttons will expand according to the text or the icon they contain. All text and icons are center-justified.

Primary

Secondary

Tertiary

Icon

Padding on all sides of a button, regardless of button type, should be 8 pixels.

Default

Small

Accessibility requires that each item on the screen is reachable using the keyboard alone. The mouse is not always an option for some users.

Keyboard navigation employs the following shortcuts.