Buttons

Buttons should serve as the highest-priority calls-to-action on a page. They should be used for navigation between pages, task flows, applications and other crucial actions.

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.

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>
  • <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.

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).

Icons

Max of 1 icon can be used inside a button.

Button Type

Use the proper button variant and type.

Types

Block Buttons

Block buttons fill the width of their containers and are commonly used in product stacks, comparison tables and on smartphone breakpoints. A block button may occupy only 50% of the container width on smartphone breakpoints if it's intended to appear in a horizontal button row, or if a standard button is used on larger breakpoints.

Block Buttons

Variants

Primary Purchase

Use for the highest priority purchase actions or the actions that most directly lead users toward making a purchase. Use the disabled state when the system is awaiting the user to take action before the button is enabled. The reason for the button appearing disabled/inactive should be clear to the user.

Primary Purchase

Primary Non-purchase

Use for highest priority non-purchase actions. Use the disabled state when the system is awaiting the user to take action before the button is enabled. The reason for the button appearing disabled/inactive should be clear to the user.

Primary Non-purchase

Secondary/General

Use as a secondary call-to-action, or by itself when there is no primary purchase or primary non-purchase call-to-action. When used with a primary call-to-action, this button should be placed in a subordinate position (max of 2 secondary buttons in the group). Use the disabled state when the system is awaiting the user to take action before the button is enabled. The reason for the button appearing disabled/inactive should be clear to the user.

Secondary/General

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.

Standard Primary Button

<button role="button" type="button" class="dds__btn dds__btn-primary dds__text-truncate">Primary Button</button>

Standard Secondary Button

<button role="button" type="button" class="dds__btn dds__btn-secondary dds__text-truncate">Secondary Button</button>

Standard Purchase Button

<button role="button" type="button" class="dds__btn dds__btn-purchase dds__text-truncate">Purchase Button</button>

Primary Mini Button

<button type="button" class="dds__btn dds__btn-primary dds__btn-sm dds__text-truncate">Primary Mini Button</button>

Secondary Mini Button

<button type="button" class="dds__btn dds__btn-secondary dds__btn-sm dds__text-truncate">Secondary Mini Button</button>

Purchase Mini Button

<button type="button" class="dds__btn dds__btn-purchase dds__btn-sm dds__text-truncate">Purchase Mini Button</button>

Primary Block Button

<button type="button" class="dds__btn dds__btn-primary dds__btn-block dds__text-truncate">Primary Block Button</button>

Secondary Block Button

<button type="button" class="dds__btn dds__btn-secondary dds__btn-block dds__text-truncate">Secondary Block Button</button>

Purchase Block Button

<button type="button" class="dds__btn dds__btn-purchase dds__btn-block dds__text-truncate">Purchase Block Button</button>

Primary Split Button

<div class="dds__mb-0 dds__btn-group dds__btn-dropdown" tabindex="-1" role="menu"> <button id="buttonSplitPrimaryTitle" class="dds__btn dds__btn-primary dds__text-truncate"> Primary Split Button </button> <button class="dds__btn dds__btn-primary dds__btn-split-arrow dds__d-flex" tabindex="0" data-toggle="dds__dropdown" data-target="#buttonSplitPrimary" aria-expanded="false" aria-labelledby="buttonSplitPrimaryTitle"> <svg viewBox="0 0 32 32" focusable="false"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonSplitPrimary" class="dds__button-dropdown-container dds__collapse dds__split-container" role="menu"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Secondary Split Button

<div class="dds__mb-0 dds__btn-group dds__btn-dropdown" tabindex="-1" role="menu"> <button id="buttonSplitSecondaryTitle" class="dds__btn dds__btn-secondary dds__text-truncate"> Secondary Split Button </button> <button class="dds__btn dds__btn-secondary dds__btn-split-arrow dds__d-flex" tabindex="0" data-toggle="dds__dropdown" data-target="#buttonSplitSecondary" aria-expanded="false" aria-labelledby="buttonSplitSecondaryTitle"> <svg viewBox="0 0 32 32" focusable="false"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonSplitSecondary" class="dds__button-dropdown-container dds__collapse dds__split-container" role="menu"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Purchase Split Button

<div class="dds__mb-0 dds__btn-group dds__btn-dropdown" tabindex="-1" role="menu"> <button id="buttonSplitPurchaseTitle" class="dds__btn dds__btn-purchase dds__text-truncate"> Purchase Split Button </button> <button class="dds__btn dds__btn-purchase dds__btn-split-arrow dds__d-flex" tabindex="0" data-toggle="dds__dropdown" data-target="#buttonSplitPurchase" aria-expanded="false" aria-labelledby="buttonSplitPurchaseTitle"> <svg viewBox="0 0 32 32" focusable="false"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonSplitPurchase" class="dds__button-dropdown-container dds__collapse dds__split-container" role="menu"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Primary Dropdown Button

<div class="dds__mb-0 dds__btn-dropdown"> <button class="dds__btn dds__btn-primary" data-toggle="dds__dropdown" data-target="#buttonDropdownPrimary" tabindex="0" aria-expanded="false" aria-controls="buttonDropdownPrimary"> Primary Dropdown Button <svg viewBox="0 0 32 32" focusable="false" aria-hidden="true"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonDropdownPrimary" class="dds__button-dropdown-container dds__collapse" role="menu" style="min-width: 206px;"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Secondary Dropdown Button

<div class="dds__mb-0 dds__btn-dropdown"> <button class="dds__btn dds__btn-secondary" tabindex="0" data-toggle="dds__dropdown" data-target="#buttonDropdownSecondary" aria-expanded="false" aria-controls="buttonDropdownSecondary"> Secondary Dropdown Button <svg viewBox="0 0 32 32" focusable="false" aria-hidden="true"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonDropdownSecondary" class="dds__button-dropdown-container dds__collapse" role="menu"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Purchase Dropdown Button

<div class="dds__mb-0 dds__btn-dropdown"> <button class="dds__btn dds__btn-purchase" data-toggle="dds__dropdown" data-target="#buttonDropdownPurchase" tabindex="0" aria-expanded="false" aria-controls="buttonDropdownPurchase"> Purchase Dropdown Button <svg viewBox="0 0 32 32" focusable="false" aria-hidden="true"> <title>dds__arrow-tri-solid-right</title> <path d="M21.997 16.002l-11.994-12.356v24.708z"></path> </svg> </button> <ul id="buttonDropdownPurchase" class="dds__button-dropdown-container dds__collapse" role="menu"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Secondary Action</a> </li> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Tertiary Action</a> </li> <hr class="dds__dropdown-divider" tabindex="-1"> <li class="dds__dropdown-list-item" role="none" tabindex="0"> <a class="dds__dropdown-item dds__text-truncate" role="menuitem" href="#" tabindex="-1">Separate Action</a> </li> </ul>
</div>

Filter Buttons

<fieldset> <legend> <h4>Gaming PC Type</h4> </legend> <div class="dds__row dds__no-gutters" data-toggle="dds__button-filter"> <div class="dds__filter-item"> <input type="radio" id="RadioButtonFilter1" name="ExampleRadioButtonFilter" value="RadioButtonFilter1" class="dds__btn-input dds__sr-only" checked=""> <label for="RadioButtonFilter1" class="dds__btn-filter dds__active" data-filter-value="Gaming Laptop">Gaming Laptop</label> </div> <div class="dds__filter-item"> <input type="radio" id="RadioButtonFilter2" name="ExampleRadioButtonFilter" value="RadioButtonFilter2" class="dds__btn-input dds__sr-only"> <label for="RadioButtonFilter2" class="dds__btn-filter" data-filter-value="Gaming Desktop">Gaming Desktop</label> </div> </div>
</fieldset>

Disabled Buttons - Add "disabled" attribute to any button

<div class="dds__my-5"> <button type="button" class="dds__btn dds__btn-primary" disabled="">Primary Button</button> <button type="button" class="dds__btn dds__btn-primary dds__btn-sm dds__text-truncate" disabled="">Primary Mini Button</button> <button type="button" class="dds__btn dds__btn-primary dds__btn-block dds__text-truncate" disabled="">Primary Block Button</button> </div>

Redlines

Standard Buttons

Standard button redlines

Block Buttons

Block button redlines

Mini Buttons

Dropdown Buttons

To be determined.

Split Buttons

To be determined.

Filter Buttons

To be determined.

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.

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".