Coachmark

@coinbase/cds-web@8.30.1

Coachmark is a flexible, accessible overlay component for onboarding, feature tours, and contextual help. It supports custom content, actions, and media.

Import

import { Coachmark } from '@coinbase/cds-web/coachmark/Coachmark'

SourceView source codeStorybookView Storybook

---

Related components

• Tour

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

() => {
  const [open, setOpen] = useState(true);
  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
  return (
    <Coachmark
      title="Welcome!"
      content="This is a Coachmark. Use it to guide users."
      action={
        <Button compact onClick={() => setOpen(false)}>
          Got it
        </Button>
      }
      onClose={() => setOpen(false)}
    />
  );
};

With Media

Loading...

󰙡

Live Code

() => {
  const [open, setOpen] = useState(true);
  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
  return (
    <Coachmark
      title="Feature Highlight"
      content="You can add media to your Coachmark."
      media={<RemoteImage height={150} width="100%" source={ethBackground} alt="feature" />}
      action={
        <Button compact onClick={() => setOpen(false)}>
          Next
        </Button>
      }
      onClose={() => setOpen(false)}
    />
  );
};

With Checkbox

Loading...

󰙡

Live Code

() => {
  const [open, setOpen] = useState(true);
  const [checked, setChecked] = useState(false);
  if (!open) return <Button onClick={() => setOpen(true)}>Show Coachmark</Button>;
  return (
    <Coachmark
      title="Dismiss Coachmark"
      content="You can add a checkbox to let users opt out."
      checkbox={
        <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)}>
          Don't show again
        </Checkbox>
      }
      action={<button onClick={() => setOpen(false)}>Close</button>}
      onClose={() => setOpen(false)}
    />
  );
};