Skip to main content

Inline message

Provide a non-interactive response to user action.

Inline message comes in three variants: size S, size M, and size L.

Each size has four types: Info, Warning, Error, and Success.

You can use inline messages for inputs and containers.

View in StorybookExternal link icon

Behavior​

  • Inline messages appear close to the elements they describe.

  • Size L messages can include an action and be dismissible.

Usage​

Size S​

Use as a part of other components like inputs or selects. Provide feedback on what users enter into a single input field. Here, inline messages can appear instantly or after a submit action.

Size M​

Provide feedback in a section container, side panel, or full page when input feedback isn't relevant or applies to multiple input fields.

Size L​

Use in same cases as size M, specifically for large descriptions. Size L inline messages provide contextual action, might include a link and be dismissible.