Skip to contentWolf-Rayet

Section message

A section message is used to alert users to a particular section of the screen.

#Default

Use a section message to tell people something about the section they are in.

Editing is restricted

You do not have permission to edit this queue. Ask an admin for access.
import { SectionMessage } from '@wolf-rayet/react';

<SectionMessage title="Editing is restricted">
  You do not have permission to edit this queue. Ask an admin for access.
</SectionMessage>

#Appearance

Use appearance to match the kind of news.

Editing is restricted

You do not have permission to edit this queue.

Cannot connect to the database

Conversations will not sync until the connection is back.

The file has been uploaded

It is available to everyone on your team.

This account has been permanently suspended

Contact your admin if you think this is a mistake.

Your managed accounts now support bots

Bots can take the first reply and hand over when they cannot answer.
import { SectionMessage } from '@wolf-rayet/react';

<SectionMessage title="Editing is restricted" appearance="information">
  You do not have permission to edit this queue.
</SectionMessage>
<SectionMessage title="Cannot connect to the database" appearance="warning">
  Conversations will not sync until the connection is back.
</SectionMessage>
<SectionMessage title="The file has been uploaded" appearance="success">
  It is available to everyone on your team.
</SectionMessage>
<SectionMessage title="This account has been permanently suspended" appearance="error">
  Contact your admin if you think this is a mistake.
</SectionMessage>
<SectionMessage title="Your managed accounts now support bots" appearance="discovery">
  Bots can take the first reply and hand over when they cannot answer.
</SectionMessage>

#Actions

Add actions when there is something to do about the message.

Payment details needed

Your trial ends in 3 days.
import { Button, SectionMessage } from '@wolf-rayet/react';

<SectionMessage
  title="Payment details needed"
  appearance="warning"
  actions={
    <>
      <Button appearance="link">Add payment details</Button>
      <Button appearance="link">Learn about billing</Button>
    </>
  }
>
  Your trial ends in 3 days.
</SectionMessage>