Indicator
A small dot indicator that can be used standalone or attached to other components like Avatar, Badge, Buttons and more to convey status such as online presence or alerts.
Props
| Name | Default | Type |
|---|---|---|
variant | — | alert online offline away Controls the color of the indicator dot |
position | — | top-right top-left bottom-right bottom-left When set, positions the indicator absolutely over its child content |
size | m | s m l Controls the size of the indicator dot |
outline | false | boolean Adds a border around the dot, useful for contrast against colored backgrounds |
ripple | false | boolean Adds a pulsing ripple animation to the indicator, useful for drawing attention |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | Optional content to wrap. Useful if you want to place a tiny icon inside |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-indicator-size | 8px | Dot diameter |
--vui-indicator-color | var(--color-text-lighter) | Dot color |
--vui-indicator-outline-color | var(--color-bg) | Outline ring color |
--vui-indicator-outline-size | 2px | Outline ring thickness |
--vui-indicator-offset | 0 | Offset from anchor corner |