InlineMessage

InlineMessages inform users about the result of an action they took. In contrast to a Banner an InlineMessage 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.

React examples

Default

<InlineMessage variant="unavailable">An example inline message</InlineMessage>

Tone variants

• Critical: Used for errors, like failed actions or form validation errors.
• Warning: Used for potential issues, risky settings changes, or connectivity concerns.
• Success: Used to confirm completed actions, like saved settings.
• Unavailable: Used for UI parts that couldn't load, like missing table data.

<Stack>
  <InlineMessage variant="critical">A critical inline message</InlineMessage>
  <InlineMessage variant="warning">A warning inline message</InlineMessage>
  <InlineMessage variant="success">A success inline message</InlineMessage>
  <InlineMessage variant="unavailable">An unavailable inline message</InlineMessage>
</Stack>

Size variants

The InlineMessage is available in small and default. Choose the size that best fits the UI section; if both fit, use default.

<Stack>
  <InlineMessage variant="critical">A default-sized inline message</InlineMessage>
  <InlineMessage variant="critical" size="small">
    A small-sized inline message
  </InlineMessage>
</Stack>

Props