Buttons
Buttons should serve as the highest-priority calls-to-action on a page. They should be used for task flows, applications and other crucial actions. If the CTA is for navigation, then use a Link Styled as a Button.
Coded Components
Helper classes: Looking for a complete list of helper classes for these components?View helper classes
Redlines: We don't include redline comps because it's always more accurate to use developer tools to inspect the coded components, or a plugin such as the Prism Redline Tool.
Primary Non-Purchase Button
Secondary Button
Primary Purchase Button
Primary Non-Purchase Mini Button
Secondary Mini Button
Primary Purchase Mini Button
Primary Non-Purchase Block Button
Secondary Block Button
Primary Purchase Block Button
Multi-select Dropdown Button
Primary Non-Purchase Split Button
Secondary Split Button
Primary Purchase Split Button
Primary Non-Purchase Dropdown Button
Secondary Dropdown Button
Primary Purchase Dropdown Button
Button Styled as a Link
Toggle Button
Toggle Button with External Label
Disabled Buttons - Add "disabled" attribute to any button
Heading
No items found.
Usage
A button label should express, as clearly and succinctly as possible, the outcome of selecting the button. This is important for both UX and SEO.
Make the first word of the button label a verb. For example, "Buy It Now".
Different types or colors of buttons, help guide users through the purchase path, the learn path (non-purchase areas of the site), or through task flows and applications.
Button variations help fit the layout and intention of the page.
A general rule of thumb is, buttons are for actions and links are for navigation, although a navigation link may be styled as a button when that's the primary call-to-action on the page.
Grouping and Alignment: There should be no more than 3 buttons in a group, with only one primary CTA per group. One exception is the Compare button in product stacks.
Changes in Labels or Changes in States: If a button label or state can change from its page load state due to user interactions on the page, then the action triggering the change should be in close enough proximity that the button state change is evident to the user.
Icons within buttons: No more than one icon should appear within a button.
- If the icon complements the label meaning (such as a magnifier with "Search") then it should be on the left of the label.
- If the icon communicates button functionality (such as the triangle in a dropdown , or an X for removing a filter), then it should be on the right of the label.
Vertical alignment: The primary CTA should always be on top.
Horizontal alignment: In most cases, a button row should be left-aligned with the primary button in the first position. In a task flow or within a modal window, the button row should be right-aligned with the primary button in the final position so that less destructive actions are encountered first.
Button Height: The line height of button labels is intentionally larger than normal to ensure that buttons are the same height as similar targets, such as inputs.
Native Buttons: When implementing a true button,
- <button></button>
- <input type="button">
- <input type="submit">
- <input type="reset">
- <input type="image">
Native HTML Buttons vs Styled Links
The general rule of thumb for a buttons is, if the user is taking an action on the page, use a button, if the user is navigating somewhere, use a styled hyperlink.
1. Can the CTA ever become disabled?
- If YES, then use a native button.
2. Does the CTA behave like part of an application UI? Does it submit or reset a form? Trigger a modal or off-canvas? Add an item to the cart? Play media content?
- If YES, then use a native button.
3. Is the CTA simply part of the browsing experience? Does it navigate to a new URL or view, or simply refresh the page?
- If YES, then use a link styled as a button.
Toggle Buttons
Toggle buttons may be disabled in either their On or Off state.
With an Internal Label
The width of a toggle button is determined by its internal label (i.e. whichever label, from its two states, is longer).
Each label should be a single word, and they should default to "On" and "Off" unless these words don't make sense for the two states. Replace these labels with caution.
With an External Label
Both of the internal labels may be replaced with a single external label that verbosely describes what the toggle button does. For example, "Subscribe to marketing emails".
When the label is external, users can select either the label or the button itself to toggle the button.
Toggle buttons that use an external label have a minimum width of 52px for the button itself.
Do's and Don'ts
Text Label
Buttons should use Title Case to indicate what will happen when the button is selected, with a text label that is 2-3 words max. Don't combine different actions in one label (exception: "Customize & Buy" within the product stack).
Do.
Use Title Case, and keep labels to 2-3 words that clearly indicate what the button does.
Don't.
Don't combine different actions in one label. Don't wrap text or use marketing shorthand.
Icons
Max of 1 icon can be used inside a button. Place it on the left of the label if it complements the meaning of the text (e.g. magnifier with Search), and on the right if it explains the button functionality (e.g. triangle for a dropdown).
Do.
Max of 1 icon can be used.
Don't.
Don't use carets. Instead, use arrow icons.
Button Type
Use the proper button variant and type.
Do.
Use primary non-purchase buttons for the highest priority non-purchase action.
Don't.
Don't use primary purchase buttons for non-purchase actions.
Common Button Labels and Usage
Title case, 2-3 words maximum.
Do not combine actions in a label (exception:
"Customize & Buy").
If standard labels don't fit the button's
purpose, align label with the task the user is attempting.
Please refer to the
Dell Technologies branding website, https://brand.delltechnologies.com/faq/#voice, for further information
regarding call-to-action labels and usage.
Button
Label:
Corresponding Action:
Add to
Cart
Search
Cancel
Save
Edit
Delete
Continue
Next/Previous
Submit
Select
Sign
In/Sign Out
View
Details
Ok/Cancel
Learn
More
Close
Takes
users to Cart page, with item added
Used
for search buttons
Takes
users back to entry point for a task
Used to
save an item
Navigates users to change an item
Deletes
an item on the page, usually with a verification step
Used as
progression
Used
as forward and backward navigation (Next is primary, Previous is secondary)
Used
to submit a task or info
Used
for choosing items in a task flow
Authentication standard, for consistency do not use Log In/Log Out or Signin/Signout
Used
instead of “Select” in cases of product details or within learn content
For
use in modal verification steps when more specific CTAs will not fit due to space
Used
to link users to more learning content or contextual help
Used
within modal windows
Grouping and Alignment
- There should be no more than 3 buttons in a group with only one primary CTA per group. One exception is the Compare button in product stacks after the user selects the Compare checkbox.
- Vertical alignment: The primary CTA should always be on top.
- Horizontal: In most cases, a button row should be left-aligned with the primary button in the first position. In a task flow or within a modal window, the button row should be right-aligned with the primary button in the final position.
Examples:
Colors & Styles
Button color indicates a specific action type and should not be chosen due to subjective preference. The below notes will help determine which button and color should be used.
Purchase
Purchase Path - refers to the user's intent to purchasing a product.
- Purchase refers to a user being only one step away from intent to purchase or purchasing. (This includes calling into purchase if it's the primary call to action on the page.)
- Max of 3 buttons in a view of a product.
- Primary: Should be placed in location of first priority. Only 1 primary button can be used.
- Secondary: Should be placed in second or third priority. Up to 2 secondary buttons can be used.
Learn, App, or Task Flow & Cross-navigation
Learn Path refers to the users progression in navigating content-centric pages.
- While not always linear, the learning path typically comprises a series of clicks through learning main pages > learning category pages > destination content (e.g., article) pages.
- Max of 1 button in learn path; links can be used in conjunction.
- Only primary treatment is used in Learn path.
Task Flow / Application refers to a task flow is a multi-step process in which users are led through a task (e.g., "Find a laptop for school") one page at a time.
- Primary: Should be placed in location of first priority. Only 1 primary button can be used.
- Secondary: Should be placed in subordinate position to Primary button. Up to 2 secondary buttons can be used.
Cross-navigation refers to an opportunity to navigate users between filters (or tabs) or navigating outside the hierarchy / site structure to another relevant area of content.
Accessibility
Redlines
Standard Buttons
Block Buttons
Mini Buttons
Dropdown Buttons
To be determined.
Split Buttons
To be determined.
Buttons Styled as Links
To be determined.
Toggle Buttons
To be determined.
The A11Y Style Guide has excellent examples of markup for buttons.
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help you understand and implement accessibility.
Please follow the guidelines for buttons from WAI-ARIA authoring practices 1.1.
- See also the markup for toggles from the A11Y Style Guide.
- See also the guidelines for menu buttons (dropdown and split buttons) from WAI-ARIA authoring practices 1.1.
Please also refer to these recommendations for buttons from WAI-ARIA 1.1.
You may refer to these examples of buttons from WAI-ARIA authoring practices 1.1.
- Also refer to the menu button examples (dropdown and split button) from WAI-ARIA authoring practices 1.1. Search the page for "menu button".
For multi-select dropdown buttons, also see the accessibility guidelines for checkboxes.