Inline Message

Inline messages consist of an inline feedback message in the form of simple text that inform the user of relevant information, revealed in context.

<InlineMessage>This is an Inline Message</InlineMessage>

Theme

These are the available themes for this component: success, warning, error, neutral and info. The default is error (due to most frequent context).

<>
  <InlineMessage theme="error">This is an error Inline Message</InlineMessage>
  <InlineMessage theme="warning">
    This is a warning Inline Message
  </InlineMessage>
  <InlineMessage theme="success">
    This is a success Inline Message
  </InlineMessage>
  <InlineMessage theme="info">This is an info Inline Message</InlineMessage>
  <InlineMessage theme="neutral">
    This is a neutral Inline Message
  </InlineMessage>
</>

Size

These are the available sizes for this component: xs, sm and md. The default is sm

<>
  <InlineMessage size="xs">This is an xs Inline Message</InlineMessage>
  <InlineMessage size="sm">This is a sm Inline Message</InlineMessage>
  <InlineMessage size="md">This is a md Inline Message</InlineMessage>
</>

Icon

Each theme has a specific icon it should export, so showing or hiding an icon is simply done using the showIcon prop. Default is true.

<InlineMessage showIcon={false}>This is an Inline Message</InlineMessage>