Buttons allow users to take actions, and make choices, with a single tap. We use 3 types of button styles.
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.
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.
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 buttons are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to the page or app.
Button containers are filled with a solid color indicative of brand identity.
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.
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>
Secondary buttons are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in the page or app.
Secondary buttons are a lower emphasis to Primary - (Contained Buttons), but a higher emphasis alternative to text buttons.
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.
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.
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.
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>
Text button variations will be used for Interface elements such as SEO widgets.
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>
Text buttons are typically used for less-pronounced actions, including those located:
In cards, text buttons help maintain an emphasis on card content.
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.
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.
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.
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.
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>
Visually represent button elements to look like html anchor elements or "Text Links".
Add the .btn-anchor
class to the implementation of "Text Buttons" above.
<button class="btn btn-link btn-anchor">
Button Label
</button>
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:
Text fields can display user input in the following ways:
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. They should be:
Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.
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 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.
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 is text the user has entered into a text field. A cursor indicates the current location of text input in a field.
Assistive elements provide additional detail about text entered into text fields.
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.
<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>
<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>
<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>
<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>
<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>
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.
Containers improve the discoverability of text fields by creating contrast between the text field and surrounding content.
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 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.
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 is text the user has entered into a text field. A cursor indicates the current location of text input in a field.
Assistive elements provide additional detail about text entered into text fields.
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>
.
<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>
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 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 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.
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.
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.
<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 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 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.
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.
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.
This switch will reflect the states of the two toggle options above.
<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>