Button

Buttons let users trigger actions or events with a single click, or by pressing Enter or Space while the button has focus.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Accessible names and roles

The approach for accessible naming depends on whether the button uses an icon only, text only, or a combination of icon and text.

Icon only

• Do provide an aria-label with the button's name.
• Do set the SVG's role to img and hide it from assistive technology with aria-hidden="true".
• Do use a Tooltip to show the button's name. Ensure that the tooltip text and the aria-label match exactly.

Text only

• Do verify that the button's accessible name exactly matches the visible text.
• Don't add an aria-label.

Icon and text

• Do verify that the button's visible text matches its accessible name.
• Do set the SVG's role to img and hide it from assistive technology with aria-hidden="true".
• Don't add alt text to the icon — it would be announced separately, creating redundant announcements.