Pulsars are best suited for situations where you need to draw attention to a part in the UI, and want to do it contextually and gently without too much of a distraction or removal from the main experience of using the app.

Specifically, a pulsar is optional - the user can simply ignore the pulsing dot and continue using the app as they would. If they happen across it, the pulsar can provide a helpful tip on hover or can even guide them to their next action.

It is also important to note that pulsars are not meant to be a permanent part of the UI. They should be used judiciously and with purpose. If pulsars are there all the time, and in every part of the app, they will lose their meaning.

In order to render the pulsar in-line over your text or other component, we recommend using a Pane with position="relative" and display="inline-block" set.

Pulsar Example

A Tooltip can be used to provide additional context for the user.

Pulsar Example

Pulsars can be positioned just like a Tooltip or Popover.

Pulsar Top Left
Pulsar Top Right
Pulsar Bottom Right
Pulsar Bottom Left

Use the size prop to control how large the Pulsar is.

Pulsar Example