Inline message

An inline message lets users know when important information is available or when an action is required.

#Default

Select the message to see the detail.

import { InlineMessage } from '@wolf-rayet/react';

<InlineMessage title="Sync paused">
  Conversations stopped syncing at 14:20. They resume when the connection is back.
</InlineMessage>

#Appearance

Use appearance to match the kind of news.

import { InlineMessage } from '@wolf-rayet/react';

<InlineMessage appearance="confirmation" title="Saved">Your routing rules are live.</InlineMessage>
<InlineMessage appearance="info" title="Routing">The bot answers first.</InlineMessage>
<InlineMessage appearance="warning" title="Nearly full">12 conversations are waiting.</InlineMessage>
<InlineMessage appearance="error" title="Failed">The rule could not be saved.</InlineMessage>

#Secondary text

Add secondary text when the title alone needs context.

import { InlineMessage } from '@wolf-rayet/react';

<InlineMessage title="Sync paused" secondaryText="since 14:20">
  Conversations resume when the connection is back.
</InlineMessage>