---
title: Indicator
description: "`Indicator` is a component that displays at the corner of elements such as avatars."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/indicator/indicator.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/indicator
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-indicator--basic
---

```tsx
<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

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

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

```tsx
import { Indicator } from "@workspaces/ui"
```

```tsx
<Indicator />
```

### Change Variant

```tsx
<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

```tsx
<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

```tsx
<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`.

```tsx
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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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`.

```tsx
<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.                                                    |
| `inline`        | `false`       | `boolean`                                                                                                                                                 | If `true`, set the indicator as an inline 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. |
| `placement`     | `"start-end"` | `"center-center" \| "center-end" \| "center-start" \| "center" \| "end-center" \| "end-end" \| "end-start" \| "end" \| "start-center" \| "start-end" ...` | The placement of the float.                                                     |
| `showZero`      | `true`        | `boolean`                                                                                                                                                 | If `true`, display 0.                                                           |
| `withBorder`    | `false`       | `boolean`                                                                                                                                                 | If `true`, display the border of the indicator.                                 |