Info button Preview

An info button is a recognizable icon that lets someone know when there is supplemental information available. When people interact with the info button, the information is surfaced in a popover.

Because the popover isn't always visible, don't include information that people must know in order to complete the field. To give people a hint about how to fill in a field, or to let them know what values can be entered, try placeholder or helper text instead.

Layout

Place the popover to fit the needs of the layout, making sure it doesn’t block essential information.

Info buttons should be reserved for supplemental information or complex concepts that need more explanation. Too many labels with info icons can clutter an interface and result in cognitive overload, especially for people using keyboards and screen readers.

Accessibility

Make sure to include an aria-label that will make the info button accessible to screen readers.

Content

Only include supplemental info

Limit the information inside of a popover to supplemental information. Don’t include information that already appears elsewhere in the layout. Keep it brief—short sentences or fragments are best. Capitalize the first word and end full sentences with a period. For more info, see Capitalization and Periods in the Microsoft Writing Style Guide.

Help people dive deeper

When additional context or a more advanced description is necessary, consider placing a link to “Learn more” at the end of the popover content. When selected, the link should open the additional content in a new tab or panel.