Variation	Description
Label	Ensure you have a clear, understandable label for the button that is concise and specific to the action that will occur if the button is used.
With Icon	Use an icon thats meaning is easily recognizable. Ideally, it should have same meaning across all our markets. To make sure your icons align, use icon before label.

Recommendations

When to Use Split Button

Split button is not navigation. Split button is made up of buttons and should allow users to perform an action on the page, or open up a modal. If you would like to have a navigation menu use navigation or links instead.

Do this

Don’t do this

Secondary Actions

Avoid using too many overlay options with split button. If there needs to be more than eight options, reconsider your use case for the split button and consider using a different component.

Do this

Don’t do this

Layout

Ensure that the button label is generic, allowing there to be a use case for the nested overlay. The icon is optional, but the primary action label is always required.

Do this

Don’t do this

Do not remove the visual signifier separating the main action button from the nested actions icon button that reveals the nested actions. This can confuse the user as they will be unaware that selecting in a different area of the button will have a different function.

Do this

Don’t do this

Button Labels

Button labels should be clear, brief and invite the customer to take action.

Do this

Use a verb and noun construction, like “View Account Details”
Be specific in the action a user is taking, like “Submit”
Use consistent verbiage for common actions, like “View” to take a user to a new view
Keep it short, target a length of one to three words with no more than five
Use title case, like “Almost Every Word is Capitalized”

Don’t do this

Don’t use personal pronouns, such as “View my Account Details”

Why?

Button labels need to be simple and easy to understand.
For accessibility generic text, like “Learn More”, is not recommended, as it does not inform a user of the content behind the action. Headings and labels accessibility standards
Remember that action should be brief. The longer a button text, the longer a user spends reading them.

Choosing icons

Icons used in buttons should be simple, with well known visual metaphors a hand with a thumbs-up for feedback, pencil for edit, or a lock for security. For more information about icons in general, check out our icons.

Do this

Use simple well known icons
Take real world examples for example lock for security
Be consistent. Always use the same icon for action.
Think customer consistency. Follow the icon names available in our icon library for the actions when possible.
Consider icon meaning and localization

Don’t do this

Use different icons for the same action
Use the same icon for different actions
Use complex icons

Why?

Icons need to be simple and easy to understand.
For accessibility, we need to make sure we use icons for the same meaning throughout our website. Consistent identification accessibility standards
Remember: the more complex the icon, the longer a user spends understanding them.

Disabled Buttons

Try to avoid using disabled buttons when possible, opting for enabled buttons or no button and an informative alternative, such as “out of stock”.

If you do choose to use a disable a button, our buttons use aria-disabled=true instead of disabled, so it’s announced to screen reader users.

Do this

Avoid disabled buttons when possible
Instead of a button try using an informative plain text alternative, like “out of stock”
Use form validation
Always provide a way out
Use a disabled button to prevent information from being submitted twice e.g. double bookings
Use aria-disabled=true

Don’t do this

Don’t use disabled button labels to communicate information
Disable the form submit until the form is complete

Why?

Disabled buttons are visible, but not always focusable. They are not announced to screen readers using tab, and can only be found if your users go looking for them.
Disabling submit buttons in forms stops users from seeing error messages. Error messages save users time by helping users know where they have incorrectly filled in a form.