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.

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

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

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

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 it's replaced with a standard button on larger breakpoints.

Block Buttons

Variants

Primary Purchase Button

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 Button

Primary Non-Purchase Button

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 Button

Secondary Button

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 Button

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.