Button

Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
PublishedElement can be used in production
React
React
In progressElement design and development in progress
Documentation
PublishedElement can be used in production

What's new

The button component has been redesigned to the updated font ramp and color palette, in addition to accessibility enhancements, and now includes four sizes.

When to use

Buttons are clickable interface components that initiate an action or trigger a change in state. They are not decorative elements. Instead, they direct users to complete important goals within an experience.

ComponentUse case
ButtonUse to trigger an action on a page or to complete tasks in other components, such as forms and modals. Exception: “Back” and “Next” buttons may be used to navigate a guided experience.
LinkUse to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.

Anatomy

Buttons can contain up to three elements:

  1. Label: short, call-to-action text
  2. Icon: optional icon
  3. Button container: primary element that holds content, color, and icons

Articles

Design accessibility checklist

Review the Dell Accessibility team's checklist for links.

Large Links, Buttons, and Controls

Learn about accessible controls.

Feedback