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="./avatar.png" />
    </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 inline size={16} offset={7} position="bottom-end" color="red" withBorder>
      <Avatar size="lg" radius="xl" src="./avatar.png" />
    </Indicator>
  );
}

Processing

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

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

Conditional displaying

Set disabled to control when to show the indicator.

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

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

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
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
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"	Key of theme.radius or any valid CSS value to set border-radius, 1000rem by default
size	string \| number	Indicator width and height
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