Indicator

Display element at the corner of another element

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Color

Position

Radius

Size

Disabled

With border

Processing

import { Indicator, Avatar, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <Indicator >
        <Avatar
          size="lg"
          src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
        />
      </Indicator>
    </Group>
  );
}

When target element has fixed width, set inline prop to add display: inline-block; styles to Indicator container. Alternatively you can set width and height with sx prop if you still want root element to keep display: block.

New

import { Avatar, Indicator } from '@mantine/core';

function Demo() {
  return (
    <Indicator inline label="New" size={16}>
      <Avatar
        size="lg"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
      />
    </Indicator>
  );
}

Offset

Set offset to change indicator position. It is useful when Indicator component is used with children that have border-radius:

import { Avatar, Indicator } from '@mantine/core';

function Demo() {
  return (
    <Indicator dot inline size={16} offset={7} position="bottom-end" color="red" withBorder>
      <Avatar
        size="lg"
        radius="xl"
        src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&q=80"
      />
    </Indicator>
  );
}

Processing

import { Avatar, Indicator } from '@mantine/core';

function Demo() {
  return (
    <Indicator inline dot processing size={12}>
      <Avatar size="lg" src="avatar.png" />
    </Indicator>
  );
}

Usage with numbers

If Indicator label is a number, then you can use extra props to control how the label is displayed.

Overflow count

999

import { useState } from 'react';
import { Avatar, Indicator, Button, Group } from '@mantine/core';

function Demo() {
  const [count, setCount] = useState(9);

  return (
    <>
      <Group position="center" spacing="xl">
        <Indicator label={count} inline size={22}>
          <Avatar size="lg" src="avatar.png" />
        </Indicator>

        <Indicator label={count} overflowCount={10} inline size={22}>
          <Avatar size="lg" src="avatar.png" />
        </Indicator>

        <Indicator label={count} showZero={false} dot={false} overflowCount={999} inline size={22}>
          <Avatar size="lg" src="avatar.png" />
        </Indicator>
      </Group>

      <Group position="center" mt="xl">
        <Button variant="outline" onClick={() => setCount((old) => (old > 0 ? old - 1 : old))}>
          Decrement
        </Button>
        <Button variant="outline" onClick={() => setCount((old) => old + 1)}>
          Increment
        </Button>
      </Group>
    </>
  );
}

Show zero

Set showZero={false} to hide indicator when label is 0:

import { Avatar, Indicator, Group } from '@mantine/core';

function Demo() {
  return (
    <Group position="center">
      <Indicator label={0} inline size={16}>
        <Avatar size="lg" src="avatar.png" />
      </Indicator>

      <Indicator label={0} showZero={false} dot={false} inline size={16}>
        <Avatar size="lg" src="avatar.png" />
      </Indicator>
    </Group>
  );
}

Go back

Image – @mantine/core

Up next

Kbd – @mantine/core

Indicator component props

Name	Type	Description
children^*	ReactNode	Element that should have an indicator
color	MantineColor	Color from theme.colors or any other valid CSS color value
disabled	boolean	When component is disabled it renders children without indicator
dot	boolean
inline	boolean	Determines whether indicator container should be an inline element
label	ReactNode	Indicator label
offset	number	Changes position offset, usually used when element has border-radius
overflowCount	number	Indicator count overflowCount
position	"bottom-end" \| "bottom-start" \| "top-end" \| "top-start" \| "bottom-center" \| "top-center" \| "middle-center" \| "middle-end" \| "middle-start"	Indicator position relative to child element
processing	boolean	Indicator processing animation
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	border-radius from theme.radius or number value to set radius in px
showZero	boolean	When showZero is true and label is zero renders children with indicator
size	number	Size in px
withBorder	boolean	Determines whether indicator should have border
zIndex	ZIndex	Indicator z-index

Indicator component Styles API

Name	Static selector	Description
root	.mantine-Indicator-root	Root element
common	.mantine-Indicator-common	Indicator Common
indicator	.mantine-Indicator-indicator	Indicator badge
processing	.mantine-Indicator-processing	Indicator Processing