Coachmark
One tip on one control: a beacon, and a card when pressed.
SourcePackage @weft-js/warp
Preview
tsx
import { state } from '@weft-js/core'import { Button, Coachmark, Stack, Text } from '@weft-js/warp'export function NewFeature() { const seen = state(false) return ( <Stack gap="related" align="center"> <Button data-coach="rollback" emphasis="outline" tone="neutral">Roll back</Button> <Text subtle>{seen.value ? 'Dismissed. Save that in your app.' : 'Press the beacon on the button.'}</Text> <Coachmark target='[data-coach="rollback"]' title="One press rollback" body="Puts the last good deploy back in about thirty seconds." onDismiss={() => (seen.value = true)} /> </Stack> )}Installation
npm install @weft-js/warpUsage
tsx
import { Coachmark } from '@weft-js/warp'Accessibility
- Esc
- Closes the card
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | — | A selector for what it points at. |
title | unknown | — | The tip's heading. |
body | unknown | — | The tip. |
| Event | Type | Default | Description |
|---|---|---|---|
onDismiss | (() => void) | — | Remember the dismissal here. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="tour"] [data-part="beacon"]
beaconcardstep-countpips