Spotlight

A spotlight points to one part of the screen, such as a button, to introduce a feature.

#Default

Use a spotlight to introduce one feature.

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

<Spotlight heading="Bots answer first" actions={<Button appearance="primary" spacing="compact">Got it</Button>}>
  New conversations go to the bot. If it cannot answer in two replies, the conversation moves to your queue.
</Spotlight>

#In a sequence

Show where people are when a spotlight is one of several.

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

<Spotlight
  heading="Bots answer first"
  footer="1 of 3"
  actions={
    <>
      <Button appearance="subtle" spacing="compact">Skip</Button>
      <Button appearance="primary" spacing="compact">Next</Button>
    </>
  }
>
  New conversations go to the bot before they reach your queue.
</Spotlight>