Indicator

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

New

<Wrap gap="lg">
  <Indicator label="New" colorScheme="info">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430"
    />
  </Indicator>

  <Indicator colorScheme="info">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430"
      shape="rounded"
    />
  </Indicator>
</Wrap>

Usage

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

import { Indicator } from "@/components/ui"

import { Indicator } from "@workspaces/ui"

<Indicator />

Change Variant

New

<Wrap gap="lg">
  <For each={["solid", "subtle", "surface"]}>
    {(variant, index) => (
      <Indicator key={index} variant={variant} label="New" colorScheme="info">
        <Avatar
          name="Hirotomo Yamada"
          src="https://avatars.githubusercontent.com/u/84060430"
        />
      </Indicator>
    )}
  </For>
</Wrap>

Change Size

New

<Wrap gap="lg">
  <For each={["sm", "md", "lg"]}>
    {(size, index) => (
      <Indicator key={index} size={size} label="New" colorScheme="info">
        <Avatar
          name="Hirotomo Yamada"
          src="https://avatars.githubusercontent.com/u/84060430"
        />
      </Indicator>
    )}
  </For>
</Wrap>

Change Color Scheme

New

<Wrap gap="lg">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Indicator key={index} colorScheme={colorScheme} label="New">
        <Avatar
          name="Hirotomo Yamada"
          src="https://avatars.githubusercontent.com/u/84060430"
        />
      </Indicator>
    )}
  </For>
</Wrap>

Change Display Position

If you want to change the display position of the indicator, specify start-end, center-end, etc. for placement.

New

const placements = [
  "start-start",
  "start-center",
  "start-end",
  "center-start",
  "center-center",
  "center-end",
  "end-start",
  "end-center",
  "end-end",
] as const

return (
  <Grid gap="lg" p="lg" templateColumns="repeat(3, 1fr)" w="fit-content">
    <For each={placements}>
      {(placement, index) => (
        <Indicator
          key={index}
          label="New"
          placement={placement}
          colorScheme="info"
        >
          <Avatar
            name="Hirotomo Yamada"
            src="https://avatars.githubusercontent.com/u/84060430?v=4"
          />
        </Indicator>
      )}
    </For>
  </Grid>
)

Change Offset

To change the offset, set a value to offset.

<Wrap>
  <Indicator offset="1.5" colorScheme="info">
    <Avatar
      size="xl"
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Set Maximum Value

To set a maximum value, set a numeric value to overflowCount.

99+

<Wrap>
  <Indicator label={100} overflowCount={99} colorScheme="info">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Hide Zero

To hide zero, set showZero to false.

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

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

Show Border

To show a border, set withBorder to true.

New

<Wrap>
  <Indicator withBorder colorScheme="info" label="New">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430?v=4"
    />
  </Indicator>
</Wrap>

Highlighting

To highlight, set ping to true.

New

<Wrap gap="lg">
  <Indicator
    ping={{
      scale: 1.4,
    }}
    label="New"
    colorScheme="info"
  >
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430"
    />
  </Indicator>

  <Indicator ping colorScheme="info">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430"
      shape="rounded"
    />
  </Indicator>
</Wrap>

Hide Indicator

To hide the indicator, set disabled to true.

<Wrap>
  <Indicator disabled label="New" colorScheme="info">
    <Avatar
      name="Hirotomo Yamada"
      src="https://avatars.githubusercontent.com/u/84060430"
    />
  </Indicator>
</Wrap>

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm"` The size of the component.
`variant`	-	`"solid" \| "subtle" \| "surface"` The variant of the component.
`disabled`	`false`	`boolean` If `true`, the indicator will be disabled.
`floatProps`	-	`IndicatorFloatProps` Props for the float element.
`label`	-	`ReactNode` The indicator label to use.
`labelProps`	-	`IndicatorLabelProps` Props for the label element.
`offset`	-	`"-0.5" \| "-1.5" \| "-1" \| "-10" \| "-11" \| "-12" \| "-13" \| "-14" \| "-15" \| "-16" ...` Changes position offset.
`overflowCount`	`99`	`number` If `label` is of type number, the maximum number displayed.
`ping`	`false`	`boolean \| PingOptions` If `true`, make an element scale and fade like a radar ping or ripple of water.
`showZero`	`true`	`boolean` If `true`, display 0.

Similar Components

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

NativePopover is a component that floats around an element to display information using the HTML Popover API.

Status is component that indicate the status of a process or state.

Tag is a component used to categorize or organize items using keywords that describe them.

Uses Components & Hooks

Float is a component used to fix elements to the edges of a container.