Indicator
Display element at the corner of another element
Import
Source
Docs
Package
Usage
![](https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-1.png)
Color
Radius
Size
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
![](https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-2.png)
Offset
Set offset
to change indicator position. It is useful when Indicator component is
used with children that have border-radius:
![](https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-3.png)
Processing animation
![](https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-4.png)
Disabled
Set disabled
to hide the indicator:
![](https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-5.png)