Inline Message

InlineMessage is a compact inline status indicator. Use it next to form fields, table cells, or other content to provide contextual status without taking up significant space.

ExamplesCodeUsageChangelog

All appearances

This field is required for Sage sync.Email address verified.Value is outside the expected range.This field cannot be blank.Connecting to server…

Tailwind v4

<InlineMessage appearance="info" message="This field is required for Sage sync." />
<InlineMessage appearance="success" message="Email address verified." />
<InlineMessage appearance="warning" message="Value is outside the expected range." />
<InlineMessage appearance="error" message="This field cannot be blank." />
<InlineMessage appearance="connectivity" message="Connecting to server…" />

With secondary text

Savedjust nowDraftunsaved changesOfflinelast synced 3m ago

Tailwind v4

<InlineMessage appearance="success" message="Saved" secondary-text="just now" />
<InlineMessage appearance="warning" message="Draft" secondary-text="unsaved changes" />
<InlineMessage appearance="connectivity" message="Offline" secondary-text="last synced 3m ago" />

Slot usage

Use the default slot instead of the message prop when you need richer content.

Required for Sage sync

Tailwind v4

<InlineMessage appearance="info">
  Required for <strong>Sage sync</strong>
</InlineMessage>

Props

Prop	Type	Default	Description
appearance	'info' | 'warning' | 'error' | 'success' | 'connectivity'	'info'	Color scheme and icon
message	string	—	Primary message text (overridden by default slot)
secondaryText	string	—	Dimmed secondary text rendered after the message

Slots

Slot	Description
default	Replaces the message prop with richer content