| group | package | title | order | slug | category | description | props | import | source | docs | styles | ||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
mantine-core |
@mantine/core |
Indicator |
1 |
/core/indicator/ |
data-display |
Display element at the corner of another element |
|
import { Indicator } from '@mantine/core'; |
mantine-core/src/Indicator/Indicator.tsx |
core/Indicator.mdx |
|
import { IndicatorDemos } from '@mantine/demos';
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.
Set overflowCount to handle overflow cases:
Set processing to indicate that it is processing:
Set showZero to display 0:
Set offset to change indicator position. It is useful when Indicator component is
used with children that have border-radius: