Indicator
Display element at the corner of another element
Import
Source
Docs
Package
Usage
Color
Shades
Radius
xs
sm
md
lg
xl
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
Offset
Set offset
to change indicator position. It is useful when Indicator component is
used with children that have border-radius:
Processing
Conditional displaying
Set disabled
to control when to show the indicator.
Indicator component props
Name | Type | Description |
---|---|---|
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
Name | Static selector | Description |
---|---|---|
root | .asuikit-Indicator-root | Root element |
common | .asuikit-Indicator-common | Indicator Common |
indicator | .asuikit-Indicator-indicator | Indicator badge |
processing | .asuikit-Indicator-processing | Indicator Processing |