Indicator

Indicator is a component that displays at the corner of elements such as avatars.

Import

import { Indicator } from "@yamada-ui/react"

Copied!

Usage

Editable example

<Wrap p="md" gap="md">
  <Indicator label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Change Variant

Editable example

<Wrap p="md" gap="md">
  <Indicator variant="solid" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Change Size

Editable example

<Wrap p="md" gap="md">
  <Indicator size="sm" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="md" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="lg" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Change Color Scheme

Editable example

<Wrap p="md" gap="md">
  <Indicator variant="solid" colorScheme="secondary" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" colorScheme="green" label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Change Display Position

If you want to change the display position of the indicator, specify top-left, right, etc. for placement.

Editable example

<Grid w="fit-content" templateColumns="repeat(3, 1fr)" p="md" gap="md">
  <Indicator placement="top-left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="top" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="top-right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Box />

  <Indicator placement="right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom-left" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator placement="bottom-right" label={99}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Grid>

Copied!

Change Offset

If the indicator is not positioned as intended due to the size of the element, adjust it with offset.

Editable example

<Wrap p="md" gap="md">
  <Indicator label="new" offset={4}>
    <Avatar
      size="2xl"
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Hide Zero

For example, when displaying the number of notifications with an indicator, there may be cases where you do not want to display 0. In that case, setting showZero to false will prevent it from being displayed.

Editable example

<Wrap p="md" gap="md">
  <Indicator label={0}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator showZero={false} label={0}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Show Border

If you want to add a border between the element and the indicator, set withBorder to true.

Editable example

<Wrap p="md" gap="md">
  <Indicator label={99} withBorder>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Highlighting

To highlight, set ping to true.

Editable example

<Wrap gap="md">
  <Indicator label="new" ping pingScale={1.4}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" label="new" ping pingScale={1.4}>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator size="lg" offset={1.5} ping>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>

  <Indicator variant="subtle" size="lg" offset={1.5} ping>
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Hide Indicator

Setting isDisabled to true will hide the indicator.

Editable example

<Wrap p="md" gap="md">
  <Indicator isDisabled label="new">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Copied!

Edit this page on GitHub

PreviousAvatar NextTransitions