Beacons are animated (pulsing) objects that draw the attention of a user towards something of importance. This could be a new feature, component or message that a user might not otherwise see.
These are used as part of a pattern of objects such as onboarding or new feature releases.
The beacon should be coupled with the Popover Sequential component when in use.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Pulse |
Outer ring that continually moves in a pulsing animation to draw attention. |
No |
|
2. Centre |
Static centre that doesn’t animate. |
No |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | 1 | 2 | 3 | 1 |
Help and support