Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

#Default

Use a flag to confirm something happened.

Conversation assigned

Ava Mensah picks it up next.

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

<Flag title="Conversation assigned" description="Ava Mensah picks it up next." />

#Appearance

Use a bold appearance when the flag carries a warning or an error.

Routing changed

New conversations go to the bot first.

Rep added

They can pick up conversations now.

Queue is filling up

12 conversations are waiting.

Could not save

Check your connection and try again.

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

<Flag appearance="info" title="Routing changed" description="New conversations go to the bot first." />
<Flag appearance="success" title="Rep added" description="They can pick up conversations now." />
<Flag appearance="warning" title="Queue is filling up" description="12 conversations are waiting." />
<Flag appearance="error" title="Could not save" description="Check your connection and try again." />

#Actions

Give a flag actions when there is a next step.

Conversation escalated

It moved to the supervisor queue.

import { Button, Flag } from '@wolf-rayet/react';

<Flag
  title="Conversation escalated"
  description="It moved to the supervisor queue."
  actions={
    <>
      <Button appearance="link">View conversation</Button>
      <Button appearance="link">Undo</Button>
    </>
  }
/>

#Flag group

Stack flags so the newest sits on top.

Rep added

Ava Mensah joined the billing queue.

Queue is filling up

12 conversations are waiting.

import { Flag, FlagGroup } from '@wolf-rayet/react';

<div style={{ position: 'relative', minHeight: 180 }}>
  <FlagGroup>
    <Flag title="Rep added" description="Ava Mensah joined the billing queue." />
    <Flag appearance="warning" title="Queue is filling up" description="12 conversations are waiting." />
  </FlagGroup>
</div>