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.
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,
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?
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?
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 may be disabled in either their On or Off state.
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.
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.
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).
Max of 1 icon can be used inside a button.
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.
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.
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.
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 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 Path - refers to the user's intent to purchasing a product.
Learn Path refers to the users progression in navigating content-centric pages.
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.
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.
To be determined.
To be determined.
To be determined.
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.
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.