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.


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.


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




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


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


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


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.


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`.


Known accessibility issues (GitHub staff only)