Indicator is a component that positions elements relative to a container, such as badges or status indicators.
It allows precise positioning of overlay elements at different locations around the container.
A simple indicator badge positioned relative to a container.
The Indicator components include the following:
The Indicator component positions elements relative to a container, such as badges or status indicators. It creates a positioning context for IndicatorItem components.
| Indicator Props | Type | Description |
|---|---|---|
is | string | Allows changing the element tag. Default is |
| Indicator Slots | Description |
|---|---|
default | The default slot. Place the main content here along with |
The IndicatorItem component is positioned relative to its parent Indicator. It can be placed at various positions using horizontal and vertical alignment props.
| IndicatorItem Props | Type | Description |
|---|---|---|
is | string | Allows changing the element tag. Default is |
align | string | Sets the horizontal alignment. Options: - |
| start | boolean | Aligns the item to the start (left) of the container. |
| center | boolean | Aligns the item to the center of the container horizontally. |
| end | boolean | Aligns the item to the end (right) of the container. |
vAlign | string | Sets the vertical alignment. Options: - |
| top | boolean | Positions the item at the top of the container. |
| middle | boolean | Positions the item in the middle of the container vertically. |
| bottom | boolean | Positions the item at the bottom of the container. |
| IndicatorItem Slots | Description |
|---|---|
default | The default slot. Place the indicator content here, such as badges or status indicators. |
An indicator with a primary badge.
An indicator badge positioned on a button.
A button positioned at the bottom of a card using IndicatorItem.
Rerum reiciendis beatae tenetur excepturi
A centered indicator with custom content.
Demonstrates all possible IndicatorItem alignments (top, middle, bottom, start, center, end).