Inline message

inline message is used to inform the user about the result of an action within the content.
Image displaying each variation of InlineMessage, from top: critical, warning, success, unavailable.

Usage

Inline messages inform users about the result of an action they took. In contrast to a banner an inline message can be very close the where the action has taken place. For example below an input field, next to a button or within a table.

Anatomy

A labeled diagram of the inline message component. The labeled parts are an icon and a message.

Options

Variants

Critical

Use the critical variant for errors. For example, during form validation or when an action failed.

Warning

Use the warning variant to inform about potential issues or risky changes. For example, important settings and possible connectivity concerns.

Success

Use the success variant to indicate task completion or a successfully completed action. For example, to confirm settings have been saved.

Unavailable

Use the unavailable variant to inform users that a specific part of the UI could not be loaded. For example, when not being able to retrieve data in a table.

Size

The `InlineMessage` is available as size `small` and `default`. Use the size that best fits to the related UI section. If either works, choose `default`.

Accessibility

Known accessibility issues (GitHub staff only)