v6.0.35

Indicator

Display element at the corner of another element
Import

Usage

Color
Shades
Radius
xs
sm
md
lg
xl
import { Indicator, Avatar, Group } from '@asuikit/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>
);
}

Inline

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 '@asuikit/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 '@asuikit/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 '@asuikit/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 '@asuikit/core';
function Demo() {
return (
<Indicator inline disabled size={12}>
<Avatar size="lg" src="./avatar.png" />
</Indicator>
);
}

Indicator component props

NameTypeDescription
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

NameStatic selectorDescription
root.asuikit-Indicator-rootRoot element
common.asuikit-Indicator-commonIndicator Common
indicator.asuikit-Indicator-indicatorIndicator badge
processing.asuikit-Indicator-processingIndicator Processing