Inline feedback message with an optional icon

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>

API Reference

PropTypeDefaultRequired
theme
"success" | "warning" | "error" | "info" | "neutral"
error

-

cssCSSProperties

-

-

showIcon
boolean

-

size
"xs" | "sm" | "md"
sm

-