Button

Also known as

Action, UI action

Similar to

Contains

Related patterns

Resources

Support

Button is an interactive component that allows the user to execute an action. There are three button variants—call to action (CTA), primary (default) and secondary. You can display a button with or without a text description or icon, and in various states.

Best practices

  • When a button has both an icon and text, use aria-hidden on the icon so that screen readers don't announce its text.
  • When a button has an icon only and no text, pass an aria-label to the button that describes its purpose.

Focusable disabled button

  • By default, a user can't place focus on a disabled button. However in certain scenarios, it may be preferable for a disabled button to receive focus. To determine if this is necessary, you can apply the following rule of thumb: "If the user or the system can enable a disabled element, it should be focusable." For further information, view the W3C guidance on the .

Keyboard interactions

KeyFunction
Tab
  • Tab moves focus to the button.
  • If the button is disabled and cannot receive focus, Tab moves focus to the next focusable component.
  • If the button has focus, Tab moves focus to the next focusable component in the tab order.
Shift + Tab
  • This action moves focus out of the component to the previous component in the tab order.
Enter / Space
  • If the button has focus, this action activates it.
  • If the button is disabled and can receive focus, this action does nothing.

Previous Page

Border layout

Next Page

Calendar