Skip to content

Button

What component has

Keyboard support

Keyboard support
KeyFunction
Tab, Shift + TabMoves focus to the next (or previous) focusable element.
Enter, SpaceActivates the button.

Attributes

The following list describes attributes that component already has.

Attributes
AttributeUsage
aria-busy="true"Applies to button with loading prop. Indicates that button is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
aria-disabled="true"Applies to button with disabled prop. Indicates that the element is perceivable but disabled, so it's not editable or otherwise operable.

Considerations for developers

Roles and attributes

The following list will help you to keep in mind the necessary roles and attributes to make our components fully accessible in the particular cases in your interfaces.

Attributes
AttributeUsage
aria-labelDefines a string value that labels an interactive element. It's a required for buttons without visible text content.
aria-labelledbyThe aria-labelledby attribute identifies the element (or elements) that labels the element it's applied to. It's required for buttons without visible text content.

Resources

Other recommendations

Refer to more accessibility recommendations in the common Accessibility guide.

Last updated:

Released under the MIT License.

Released under the MIT License.