Pulsar

Pulsar brings focus to a specific element on the screen, acting like "training wheels" to guide people towards the intended way to perform the action. Pulsar is used in isolation or combination with other education components for more instruction.

also known as Activity Indicator, Circular Indicator, Ring

Figma:

Partially ready

Responsive:

Ready

Adaptive:

N/A

Props

Component props
Name	Type	Default
`paused`	`boolean`	-
	Used to hide the element. See the paused variant for more details.
`size`	`number`	`136`
	The size of the element in pixels. See the size variant for more details.

Usage guidelines

When to use

Calling attention to a specific element within a surface. Note: a Pulsar should be used in conjunction with a Popover.

When not to use

In the case of a user error or warning that needs attention. Use BannerCallout or form errors states instead.
When the focus of the attention is at the surface level. Use BannerCallout instead.

Best Practices

Show Pulsar with an educational Popover that contains an affordance to dismiss both Popover and Pulsar.

Don't

Use Pulsar to highlight an element with no context or way to dismiss. The user should always know why something is being highlighted and be able to opt out.

Use Pulsar to highlight or promote a feature or element on a surface.

Don't

Display Pulsar to point out an error or status update. Use BannerSlim or other messaging components instead.

Prioritize Pulsars to call out the most critical feature users should be aware of.

Don't

Show more than one Pulsar at a time. Multiple Pulsars dilute user focus/attention.

Place Pulsar in the bottom center of the content without obstructing content in cases where the target is too large to comfortably encapsulate.

Don't

Attempt to grow Pulsar to fit larger content as it can create an awkward composition between Pulsar/Popover and its target.

Accessibility

Variants

Paused

Pulsar can be shown or hidden using the paused prop.

import { useState } from 'react';
import { Box, Button, Flex, Pulsar } from 'gestalt';

export default function Example() {
  const [isPaused, setIsPaused] = useState(false);

  const text = isPaused ? 'Click to show' : 'Click to hide';

  return (
    <Box padding={2}>
      <Flex alignItems="center" direction="column" gap={4}>
        <Button
          onClick={() => setIsPaused((currVal) => !currVal)}
          size="md"
          text={text}
        />

        <Pulsar paused={isPaused} />
      </Flex>
    </Box>
  );
}

Size

When needed, Pulsar can be displayed at different sizes using the size prop.

import { useState } from 'react';
import { Box, Flex, NumberField, Pulsar } from 'gestalt';

export default function Example() {
  const [sizePX, setSizePx] = useState();

  return (
    <Box padding={2}>
      <Flex alignItems="center" direction="column" gap={4}>
        <NumberField
          id="size variant pixel input"
          label="Enter Pulsar size in pixels"
          max={200}
          min={20}
          onChange={({ value }) => setSizePx(value)}
          step={10}
        />

        <Pulsar size={sizePX} />
      </Flex>
    </Box>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library	Partially ready	Component is live in Figma, however may not be available for all platforms.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub