Coachmark
One tip on one control: a beacon, and a card when pressed.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Button, Coachmark, Stack, Text} from '@kerf-js/veneer'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={rollbackDescription} onDismiss={() => (seen.value = true)} /> </Stack> )}const rollbackDescription = 'Puts the last good deploy back in ' + 'about thirty seconds.'Installation
npm install @kerf-js/veneerUsage
tsx
import { Coachmark } from '@kerf-js/veneer'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