Info button

Small interactive icon to show there's additional information or context when clicked

When to use an info button

  1. You want to provide contextual guidance to a field or element in your design.
  2. You want to clarify unfamiliar terms like acronyms or internal jargon.
  3. You want to provide a helpful tip about a feature or element.

 

Behavior

An info button is an interactive element and should allow users to click it to see additional information unless it’s disabled.

 

Best Practices

Consistent placement

When using info buttons in your design, make sure they’re in the same spot throughout your design. When using them in the Label component, they’re always positioned to the right of the text.

 

Make sure they’re accessible

Ensure that all users can navigate and interact with the info button.