Indicator

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

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

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

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

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>
  );
}

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

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

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

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