Inline Message

View source Report an issue

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

<div className="flex gap-3 flex-wrap justify-center">
  <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>
</div>

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>

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>

API Reference

InlineMessage

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-
`showIcon`	`boolean`		-
`size`	`"xs"` \| `"sm"` \| `"md"`	`sm`	-
`theme`	`"neutral"` \| `"success"` \| `"warning"` \| `"info"` \| `"error"`	`error`	-