Buttons

Overview

Buttons allow users to take actions, and make choices, with a single tap. We use 3 types of button styles.

  1. Primary - Contained Button (high emphasis)
    • Contained buttons have more emphasis, as they use a color fill and shadow.
  2. Secondary - Outlined Button (medium emphasis)
    • Outlined buttons are used for more emphasis than text buttons due to the stroke.
  3. Text button (low emphasis)
    • Text buttons are typically used for less important actions.

Anatomy

All buttons must contain a Text Label. Primary, Secondary and Text buttons use text labels, which describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does.

Using capitalized button text labels (for languages that have capitalization) is recommended to distinguish the text label from surrounding text. If a text button does not use capitalization for button text, find another characteristic to distinguish it such as color, size, or placement.

Hierarchy and Placement

All layouts should contain a single Primary button. This consistency makes it clear that other buttons have less importance in the hierarchy. The Primary button commands the most attention. A page may show more than one button in a layout at a time.

A Primary (high-emphasis) button can be accompanied by Secondary (medium-emphasis) and Text (low-emphasis) buttons that perform less important actions. When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.

When a Secondary or Text button are displayed side by side with a Primary button, always ensure the Primary button is on the right side.

Migration

While FullBeauty Brands migrates to only use Design Systems, developers can use the .btn-ds class to make sure that legacy button styles / CSS are not applied to button elements on non-migrated pages.


Primary - Contained Button

Usage

Primary buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to the page or app.

Container

Button containers are filled with a solid color indicative of brand identity.

Icon

Leading icons can be placed next to text labels to both clarify an action and call attention to a button. Use icons that clearly communicate their meaning.

Development

Add the corresponding class name to the button to match the desired design.

<button class="btn btn-primary btn-lg btn-block">
  Button Label
</button>
Large - Primary
Default - Primary
Small - Primary
Large - Hovered
Default - Hovered
Small - Hovered
Large - Focused
Default - Focused
Small - Focused
Large - Disabled
Default - Disabled
Small - Disabled
Leading Icon Large - Primary
Leading Icon Default - Primary
Leading Icon Small - Primary

Secondary - Outlined Button

Usage

Secondary buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in the page or app.

Alternatives

Secondary buttons are a lower emphasis to Primary - (Contained Buttons), but a higher emphasis alternative to text buttons.

Container

Button containers are displayed by a stroke around a text label. In a resting state, outlined buttons should display containment with a stroke and no fill. A background color is shown on button hover.

Icon

Leading icons can be placed next to text labels to both clarify an action and call attention to a button. Use icons that clearly communicate their meaning.

States

Outlined buttons can be placed on top of a variety of backgrounds. Its container is transparent and until the button is interacted with, a color isn’t visible. Color contrast checking should be performed to ensure the proper ADA compliance guidelines are met. Refer to the button container fill colors and opacity values in the guidelines below.

Development

Add the corresponding class name to the button to match the desired design.

<button class="btn btn-outline-primary btn-lg btn-block">
  Button Label
</button>
Large - Outline
Default - Outline
Small - Outline
Large - Hovered
Default - Hovered
Small - Hovered
Large - Focused
Default - Focused
Small - Focused
Large - Disabled
Default - Disabled
Small - Disabled

Interface Tags

Text button variations will be used for Interface elements such as SEO widgets.

Development

Add the corresponding class name to the button to match the desired design.

<button class="btn btn-tag btn-sm my-1 px-4">
  Button Label
</button>
Default - Category Leading Icon
Default
Default - Close Icon
Hover State - Category Leading Icon
Hover State
Hover State - Close Icon
Focus State - Category Leading Icon
Focus State
Focus State - Close Icon
Inactive State - Category Leading Icon
Inactive State

Text Buttons

Usage

Text buttons are typically used for less-pronounced actions, including those located:

  • In dialogs
  • In alerts
  • In cards

In cards, text buttons help maintain an emphasis on card content.

Placement

Text buttons are often embedded in contained components like cards and dialogs, in order to relate themselves to the component in which they appear. Because text buttons don’t have a container, they don’t distract from nearby content.

Icon

Leading icons can be placed next to text labels to both clarify an action and call attention to a button. Use icons that clearly communicate their meaning.

States

Text buttons can be placed in front of a variety of backgrounds. Until the button is interacted with, its container isn’t visible. To maintain accessibility, Material Design provides baseline opacity values for the color overlays used by states. A brand can adjust opacity values to suit its color scheme.

Destructive Text Buttons

If an alert button results in a destructive action, such as deleting content, set the Text Button’s style to Destructive. This uses a common pattern within mobile devices to alert the user they are about to execute a destructive action. Additionally, provide a Cancel button so people can safely opt out of the destructive action.

Development

Add the corresponding class name to the button to match the desired design.

<button class="btn btn-link btn-lg btn-block">
  Button Label
</button>
Large - Text Button
Default - Text Button
Small - Text Button
Large - Hovered
Default - Hovered
Small - Hovered
Large - Focused
Default - Focused
Small - Focused
Large - Disabled
Default - Disabled
Small - Disabled
Large Danger
Default Danger
Small Danger
Large Danger - Hovered
Default Danger - Hovered
Small Danger - Hovered
Large Danger - Focused
Default Danger - Focused
Small Danger - Focused

Anchor Buttons

Visually represent button elements to look like html anchor elements or "Text Links".

Development

Add the .btn-anchor class to the implementation of "Text Buttons" above.

<button class="btn btn-link btn-anchor">
    Button Label
</button>
Default
Hover State
Focus State

Form Elements

Overview

Material Design conducted studies with around 600 participants to understand characteristics of text field usability and user preferences for text field design. The studies measured a user’s ability to scan and find a text field as well as the ability to identify the types of text fields.

Research showed the following are best practices that can be adopted to improve the usability of text fields:

  • Use an enclosed text field with a rectangular box, rather than a single underline to indicate a text field
  • Use either a semi-transparent fill with a bottom line or a fully transparent fill with an opaque stroke for the text field box
  • Place label text within the boundary of a text field box
  • Ensure text field outlines or strokes meet 3:1 minimum color contrast ratio to the background

Types

Text fields can display user input in the following ways:

  1. Single line text fields
    • As the cursor reaches the right field edge, text longer than the input line automatically scrolls left. Single-line fields are not suitable for collecting long responses, instead use a multi-line text field or text area.
  2. Multi-line text fields
    • Shows all user input at once. Overflow text causes the text field to expand (shifting screen elements downward), and text wraps onto a new line. These fields initially appear as single-line fields, which is useful for compact layouts that need to be able to accommodate large amounts of text.
  3. Text areas
    • Taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. The large initial size indicates that longer responses are possible and encouraged. Ensure the height of a text area fits within mobile screen sizes.
  4. Read-only fields
    • Display pre-filled text that the user cannot edit. A read-only text field is styled the same as a regular text field and is clearly labeled as read-only.

Usage & Principles

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. They should be:

  1. Discoverable
    • Text fields should stand out and indicate that users can input information.
  2. Clear
    • Text field states should be clearly differentiated from one another.
  3. Efficient
    • Text fields should make it easy to understand the requested information and to address any errors.

Anatomy

Container

Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.

Fill and stroke

A text field container has a fill and a stroke around the entire container. The color and thickness of a stroke can change to indicate when the text field is active.

Label text

Label text is used to inform users as to what information is requested for a text field. Every text field should have a label. Label text should be aligned with the input line, and always visible. It can be placed in the middle of a text field, or rest near the top of the container.

Required text indicator

If most fields are required, indicate optional fields only by displaying the word “optional” in parentheses next to the label text. This is the most commonly used practice for FBB. If only some fields are required, indicate those required ones. To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.

Input text

Input text is text the user has entered into a text field. A cursor indicates the current location of text input in a field.

Assistive Elements

Assistive elements provide additional detail about text entered into text fields.

  1. Helper Text
    • Helper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.
  2. Error Message
    • When text input isn’t accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
  3. Icons
    • Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts, which are useful when you need to design for colorblind users.
  4. Character Counter
    • Character or word counters should be used if there is a character or word limit. They display the ratio of characters used and the total character limit.

Error text

For text fields that validate their content (such as passwords), replace helper text with error text when applicable. Swapping helper text with error text helps prevent new lines of text from being introduced into a layout, thus bumping content to fit it.

If only one error is possible, error text describes how to avoid the error.

If multiple errors are possible, error text describes how to avoid the most likely error.


Text Input

Default
Hover
Focus
Filled
Disabled
<div class="form-label-group">
       <input id="text-input-1" class="form-control" type="text" placeholder="Text Input Field">
       <label for="text-input-1">Default</label>
</div>

Password Input (Show/Hide)

Default
Show
Hover
Show
Focus
Show
Filled - Hidden
Show
Filled - Shown
Hide
Read Only
Hide
<div class="form-label-group">
  <input id="password-input-1" class="form-control input-password-toggle" type="password" placeholder="Password Input Field" autocomplete="password">
  <a tabindex="0" class="input-password-toggle-link">Show</a>
  <label for="password-input-1">Default</label>
</div>

Validation Input

Show
8-16 Characters 1 Letter 1 Number
Show
8-16 Characters 1 Letter 1 Number
Show
8-16 Characters 1 Letter 1 Number
Show
8-16 Characters 1 Letter 1 Number
Hide
8-16 Characters 1 Letter 1 Number
Hide
8-16 Characters 1 Letter 1 Number
<div class="form-label-group validation-input">
  <input id="validation-input-1" class="form-control input-password-toggle" type="password" placeholder="Password Input Field" autocomplete="password" maxlength="16">
  <a tabindex="0" class="input-password-toggle-link">Show</a>
  <label for="validation-input-1">Default</label>
  <div class="form-text small">
    <span class="validation-indicator length">8-16 Characters</span>
    <span class="validation-indicator letter">1 Letter</span>
    <span class="validation-indicator number">1 Number</span>
  </div>
</div>

Text Areas

Default
Hover
Focus
Filled
Filled — Character Limit Indicator
Disabled
<div class="form-label-group">
  <textarea id="textarea-input-1" class="form-control" type="text" placeholder="Textarea Field"></textarea>
  <label for="textarea-input-1">Default</label>
</div>

Text Inputs - Helper Text

Default
Helper message written here
Hover
Helper message written here
Focus
Helper message written here
Filled
Helper message written here
Read Only
Helper message written here
<div class="form-label-group">
  <input id="helper-text-1" class="form-control" type="text" placeholder="Text Input Field">
  <label for="helper-text-1">Text Field Label</label>
  <div class="form-text">
    Helper message written here
  </div>
</div>

Invalid Input

Invalid Default Input — Empty Field
Error: Message written here
Invalid Default Input — Filled
Error: Message written here
Invalid Password Input — Empty Field
Show
Error: Message written here
Invalid Password Input — Filled
Show
Error: Message written here
Invalid Text Area — Empty Field
Error: Message written here
Invalid Text Area — Filled
Error: Message written here
Error Text

For text fields that validate their content (such as passwords), replace helper text with error text when applicable. Swapping helper text with error text helps prevent new lines of text from being introduced into a layout, thus bumping content to fit it.

If only one error is possible, error text describes how to avoid the error.
If multiple errors are possible, error text describes how to avoid the most likely error.

Container

Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.

Fill and Stroke

A text field container has a fill and a stroke around the entire container. The color and thickness of a stroke can change to indicate when the text field is active.

Label Text

Label text is used to inform users as to what information is requested for a text field. Every text field should have a label. Label text should be aligned with the input line, and always visible. It can be placed in the middle of a text field, or rest near the top of the container.

Required Text Indicator

If most fields are required, indicate optional fields only by displaying the word “optional” in parentheses next to the label text. This is the most commonly used practice for FBB. If only some fields are required, indicate those required ones. To indicate that a field is required, display an asterisk (*) next to the label text and mention near the form that asterisks indicate required fields.

Input Text

Input text is text the user has entered into a text field. A cursor indicates the current location of text input in a field.

Assistive Elements

Assistive elements provide additional detail about text entered into text fields.

  1. Helper Text - Helper text conveys additional guidance about the input field, such as how it will be used. It should only take up a single line, being persistently visible or visible only on focus.
  2. Error Message - When text input isn’t accepted, an error message can display instructions on how to fix it. Error messages are displayed below the input line, replacing helper text until fixed.
  3. Icons - Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts, which are useful when you need to design for colorblind users.
  4. Character Counter - Character or word counters should be used if there is a character or word limit. They display the ratio of characters used and the total character limit.

Dropdown

In order to implement the <select> dropdown in this design system, a .dropdown-select class is required in the parent element wrapper of the <select> element.

If you do not want to pre-select an option, a default <option> must be set as the first child of the <select> element, as shown in the default and hovered examples below. A default option must be the first child and either have a selected attribute and/or a .is-default-option class. For example: <option value class="is-default-option" selected disabled hidden></option>.

Default
Hovered
Disabled
Default — Pre-selected Option
Focused — Pre-selected Option
<div class="dropdown-select">
  <select id="dropdown-1" class="form-control">
    <option value="" class="is-default-option" disabled="" hidden=""></option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
  </select>
  <label>Default</label>
</div>

Controls

Types

Radio Buttons

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space. When options include more than a simple label, surround the radio button and other options with a border to create a button. Ensure a proper “hit area” surrounds the radio button. Clicking the radio circle, label or surrounding area should select or deselect that option.

Checkboxes

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Ensure a proper “hit area” surrounds the checkbox. Clicking the checkbox, label or surrounding area should select or deselect that option.

Switches

Switches should be used instead of radio buttons if each item in a set can be independently controlled. When a user toggles a switch, its corresponding action takes effect immediately.

Usage & Principles

Selection controls allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs.

Familiar

  1. Familiar
    • Selection controls have been in user interfaces for a long time and should be used as expected.
  2. Scannable
    • It should be visible at a glance if a selection control has been selected, and selected items should be more visually prominent than unselected items.
  3. Efficient
    • Selection controls make it easy to compare available options.

Checkboxes

Default
Hovered
Focused
Selected
Disabled
Usage

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. Ensure a proper “hit area” surrounds the checkbox. Clicking the checkbox, label or surrounding area should select or deselect that option.


Radio

Default
Hovered
Focused
Selected
Disabled
<div class="custom-control custom-radio">
    <input class="custom-control-input" type="radio" id="radio-input" name="custom-radio-group" />
    <label class="custom-control-label" for="radio-input">Radio Label</label>
</div>

Radio Button

Default
Hovered
Focused
Selected
Disabled
Usage

Radio buttons allow the user to select one option from a set. Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a dropdown menu because it uses less space. When options include more than a simple label, surround the radio button and other options with a border to create a button. Ensure a proper “hit area” surrounds the radio button. Clicking the radio circle, label or surrounding area should select or deselect that option.

Use the .radio-button-label inside of the .form-radio-content block to make sure it gets bolded when option is selected, as desired. Example below.

<div class="form-radio-button-container">
    <input class="form-radio-button-input" type="radio" id="radio-button-input" name="shared-radio-button-group-name" />
    <div class="form-control form-radio-content">
        <label class="form-radio-button-label" for="radio-button-input">
            <!-- Start: Customize your radio label content in this block -->
            <div class="d-flex justify-content-between">
                <span class="radio-button-label">Arrives Aug 1 - 3</span>
                <span class="font-weight-bold">$14.99</span>
            </div>
            <div class="font-size-md">Standard Delivery (7 business days)</div>
            <!-- End: Customize your radio label content in this block -->
        </label>
        <!-- Additional non-radio label content can go here -->
    </div>
</div>

Switches

Usage

Switches should be used instead of radio buttons if each item in a set can be independently controlled. When a user toggles a switch, its corresponding action takes effect immediately.


Toggle Switch & Label Container Fill (Allow Space Between Elements)

The switch and its label by default will display inline (immediately follow each other). This toggle will allow the label and switch element to fill the container (to the far left and right of the container). To have the switch and label fill the container, add the .switch-container-fill class to the .custom-switch element.

Toggle setting will be reflected in the "Toggle Example Switch" below.


Toggle Switch & Label Order

Switch / label order is relative to their visual position, with the switch on the left (default) or switch on the right. Positioned to the right requires the .switch-position-right class to be added to the .custom-switch element. Note: in the markup, the label element must still follow the input element, as shown in the code snippet.

Toggle setting will be reflected in the "Toggle Example Switch" below.


Toggle Example Switch

This switch will reflect the states of the two toggle options above.


Default
Active
Disabled
Default (Focused)
Active (Focused)
<div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="customSwitch">
    <label class="custom-control-label" for="customSwitch">Toggle this switch element</label>
</div>