Inline Message

Highlights a short, non-urgent contextual message and prompts the user to take action.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To proactively provide information about a specific element in the interface
  • When communicating about a section

When not to use

  • To provide feedback after a user action (use an Actionable Callout instead)
  • When communicating about the entirety of a page
  • As an error message on a form

Best practices

Do

Do use the component inline with another element, like a paragraph and a form field.

Caution

Be careful with how many messages are stacked. The recommendation is for no more than two.

Don't

Don’t write an overly long title and description. This is intended to be a brief system message.

Don't

Don’t use capital case in the title, description, or action, as it can be hard to parse. Use sentence case for natural language.

Don't

Don’t show an Inline Message inside an existing callout. Only use either of these components, but not at the same time.

Don't

Don't change the default icon color (e.g., red must not appear in an info inline message).