Spotlight

A spotlight focuses attention on a specific part of the UI, such as a button or icon, to educate users about key features or workflows.

#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>