Indicator

Indicator displays a visual affordance that something has been updated (either with a quantitative number or not)

Props

Component props
Name	Type	Default
`accessibilityLabel` Required	`string`	-
	Label for screen readers to announce Button. See the Accessibility guidelines for details on proper usage.
`count`	`number`	-
	When supplied, will display a numeric counter. See the Counter variant to learn more. Above three digits, the only option to display is "99+".
`dataTestId`	`string`	-
	Available for testing purposes, if needed. Consider better queries before using this prop.
`position`	`"middle" \| "top"`	`"middle"`
	Indicator position relative to its parent element. See the positioning variant to learn more.

Localization

Be sure to localize all text strings. Note that localization can lengthen text by 20 to 30 percent.

Variants

Notification

import { Flex, Indicator } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      gap={6}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Indicator accessibilityLabel="Visit the Gestalt documentation" />
    </Flex>
  );
}

Counter

import { Flex, Indicator } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      gap={6}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Indicator
        accessibilityLabel="Visit the Gestalt documentation"
        count={3}
      />
      <Indicator
        accessibilityLabel="Visit the Gestalt documentation"
        count={16}
      />
      <Indicator
        accessibilityLabel="Visit the Gestalt documentation"
        count={100}
      />
    </Flex>
  );
}

Edit page on GitHub