Indicator

Display element at the corner of another element

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

Color

Position

Radius

Size

Disabled

With border

Processing

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

function Demo() {
  return (
    <Indicator>
      <Avatar
        size="lg"
        radius="sm"
        src="/?originalUrl=https%3A%2F%2Fmantine.dev%2F%26quot%3Bhttps%3A%2F%2Fraw.githubusercontent.com%2Fmantinedev%2Fmantine%2Fmaster%2F.demo%2Favatars%2Favatar-1.png%26quot%3B%2520%2520%2520%2520%2520%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3B%2FIndicator%26gt%3B%2520%2520)%3B%257D%253C%2Fcode">


Inline
When the target element has a fixed width, set inline prop to add display: inline-block; styles to
Indicator container. Alternatively, you can set width and height with style prop if you still want the 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"
        radius="sm"
        src="/?originalUrl=https%3A%2F%2Fmantine.dev%2F%26quot%3Bhttps%3A%2F%2Fraw.githubusercontent.com%2Fmantinedev%2Fmantine%2Fmaster%2F.demo%2Favatars%2Favatar-2.png%26quot%3B%2520%2520%2520%2520%2520%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3B%2FIndicator%26gt%3B%2520%2520)%3B%257D%253C%2Fcode">

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="/?originalUrl=https%3A%2F%2Fmantine.dev%2F%26quot%3Bhttps%3A%2F%2Fraw.githubusercontent.com%2Fmantinedev%2Fmantine%2Fmaster%2F.demo%2Favatars%2Favatar-3.png%26quot%3B%2520%2520%2520%2520%2520%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3B%2FIndicator%26gt%3B%2520%2520)%3B%257D%253C%2Fcode">

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

function Demo() {
  return (
    <Indicator inline processing color="red" size={12}>
      <Avatar
        size="lg"
        radius="sm"
        src="/?originalUrl=https%3A%2F%2Fmantine.dev%2F%26quot%3Bhttps%3A%2F%2Fraw.githubusercontent.com%2Fmantinedev%2Fmantine%2Fmaster%2F.demo%2Favatars%2Favatar-4.png%26quot%3B%2520%2520%2520%2520%2520%2520%2F%26gt%3B%2520%2520%2520%2520%26lt%3B%2FIndicator%26gt%3B%2520%2520)%3B%257D%253C%2Fcode">

Disabled
Set disabled to hide the indicator:
import { useDisclosure } from '@mantine/hooks';
import { Avatar, Indicator, Button, Stack } from '@mantine/core';

function Demo() {
  const [visible, { toggle }] = useDisclosure();

  return (
    <Stack align="center">
      <Indicator inline disabled={!visible} color="red" size={12}>
        <Avatar
          size="lg"
          radius="sm"
          src="/?originalUrl=https%3A%2F%2Fmantine.dev%2F%26quot%3Bhttps%3A%2F%2Fraw.githubusercontent.com%2Fmantinedev%2Fmantine%2Fmaster%2F.demo%2Favatars%2Favatar-5.png%26quot%3B%2520%2520%2520%2520%2520%2520%2520%2520%2F%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3B%2FIndicator%26gt%3B%2520%2520%2520%2520%2520%2520%26lt%3BButton%2520onClick%3D%257Btoggle%257D%26gt%3BToggle%2520indicator%26lt%3B%2FButton%26gt%3B%2520%2520%2520%2520%26lt%3B%2FStack%26gt%3B%2520%2520)%3B%257D%253C%2Fcode">
ImageKbd