Button

Button is an interactive component that allows the user to execute an action. Button comes in three distinct appearances: solid, bordered, and transparent. These styles provide greater choice and flexibility for establishing hierarchy and affordance within a UI. You can display a button with or without a text description or icon.

Also known as: Action, UI action

View source code

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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 aria-disabled attribute.

Keyboard interactions

Key	Function
`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.

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 aria-disabled attribute.

Keyboard interactions

Key	Function
`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.

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 aria-disabled attribute.

Keyboard interactions

Key	Function
`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.