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

Web:

iOS:

Android:

A11y:

Props

Component props
Name	Type	Default
`paused`	`boolean`	-
	Used to hide the element. See the paused variant for more details.
`size`	`number`	-
	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 Callout or form errors states instead.
When the focus of the attention is at the surface level. Use Callout instead.

Accessibility

Ready

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
          text={text}
          onClick={() => setIsPaused((currVal) => !currVal)}
          size="md"
        />

        <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"
          min={20}
          max={200}
          step={10}
          onChange={({ value }) => setSizePx(value)}
        />

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

Positioning

Pulsar should be centered over the target element.

import { Box, Button, Pulsar } from 'gestalt';

export default function Example() {
  return (
    <Box padding={2}>
      <Box margin={12}>
        <Button text="New feature - click me!" />

        <Box position="absolute" top marginStart={8} marginTop={3}>
          <Pulsar />
        </Box>
      </Box>
    </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 is available in code for web and mobile web.
iOS		Component is not currently available in code for iOS.
Android		Component is not currently available in code for Android.