Feature Beacon
A pulsing beacon dot pinned to a new feature that opens a small New callout with title, text and Got it, remembering the dismissal via a storage key.
Preview
Projects
Active
- Q3 launch planNoorIn review
- Pricing page copySamDraft
- Onboarding emailsInesShipped
AaSize sm
AaSize md
AaSize lg
AaEmber
AaInk
AaSuccess
AaSeen
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The new feature. Required. |
| title | string | — | Callout title; names the dot “New: …”. Required. |
| description | ReactNode | — | A line of explanation. |
| href / linkLabel | string | — / "Learn more" | Optional link. |
| storageKey | string | — | Remember Got it in localStorage. resetFeatureBeacon(key) forgets it. |
| dismissed / onDismiss | boolean / () => void | — | Controlled dismissal. |
| placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Corner of the feature for the dot. |
| tone / size | "ember" | "ink" | "success" / "sm" | "md" | "lg" | "ember" / "md" | Dot colour and size (8, 10 or 12 px). |
| dismissedAppearance | "hidden" | "ring" | "hidden" | After Got it: nothing, or a quiet hollow “seen” ring. |
| side / align | Radix side / align | "bottom" / "center" | Callout placement. |
| defaultOpen / autoFocus | boolean | false / true | Open at rest; turn autoFocus off for static previews. |
| badge / dismissLabel | string | "New" / "Got it" | Callout copy. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.