Raised Buttons

Overview

Buttons can have the following states:

• Active – indicates that the related action is available
• Hover – indicates that something will happen when the button is selected
• Pressed – indicates that the button is being selected
• Disabled – indicates that the related action is unavailable

Primary vs Secondary

The primary action represents the preferred action in an application. Primary buttons should be labeled with positive actions like Save, Submit, and OK, and take on the theme’s accent color to indicate the preferred action.

The secondary action represents an alternate action in an application. Secondary buttons may be labeled with a regressive or negative action like Back or Cancel, and take on the theme’s neutral color to indicate it is an alternate option.

Styles

Raised buttons are labeled with text and have a visual cue defining the button space.

Use raised buttons to add dimension and emphasize functions on busy or wide spaces.

Contextual Colors

Contextual colors are used to associate a specific meaning or emphasis with the UI component. Use these colors sparingly so not to take away from its importance.

• Blue = Informational
• Green = Success
• Red = Danger

Disabled

A button that won't produce action upon press, indicated by a faded appearance.

Reference: https://material.io/guidelines/components/buttons.html

Usage

Use raised buttons on the base layer of the user interface or inline.

The base layer is flat and does not have any drop shadow.

Button Sizes

Relative dimensions of buttons.

Reference: https://www.w3schools.com/Bootstrap/bootstrap_buttons.asp

Dropdowns / Dropups

Use dropdown/dropup buttons when you have multiple actions to choose from within a group.

They can be raised or flat, and can have different elements, such as headlines, checkboxes, radios, link list, or button groups.

Use dropup buttons when the placement of the button is at the bottom of the parent layer or on a bottom nav bar.

Block Buttons

Block buttons are labeled with text and span the full width of the parent layer. Reserve using block buttons for when the view is extra small, such as a mobile view.

Button Groups

Group a series of buttons together on a single line to form a button group.

Button groups can be used to group tasks, functionality, or actions.

Reference: Adapted from https://material.io/guidelines/components/buttons.html

Radio/Checkbox Button Groups

Series of radio or checkbox buttons for a user to make choices. Radio buttons are used for choosing one option. Checkboxes are for choosing one or multiple options. Upon press, the appearance of these buttons is altered, such as changing or filling with color.

Reference: Adapted from https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/radio-button

Button Toolbar

Single button group or combined button groups to offer users access to a wide range of application functions.

Reference: http://v4-alpha.getbootstrap.com/components/button-group/#button-toolbar