StatusIcon

Circular icon badge that shows a tooltip on hover or focus. The size prop (xs, sm, md, lg, xl) sets the badge and icon size (a number in px still works).

Jump to API reference

Import

Vue

import { UiStatusIcon } from '@ziyarago/ui/vue'

States

Vue

<UiStatusIcon icon="check" tone="success" tip="Confirmed" />

<UiStatusIcon icon="clock" tone="warning" tip="Pending" />

<UiStatusIcon icon="x" tone="danger" tip="Cancelled" />

Sizes

Vue

<UiStatusIcon icon="check" tone="success" tip="Confirmed" size="xs" />

<UiStatusIcon icon="check" tone="success" tip="Confirmed" size="sm" />

<UiStatusIcon icon="check" tone="success" tip="Confirmed" size="md" />

<UiStatusIcon icon="check" tone="success" tip="Confirmed" size="lg" />

<UiStatusIcon icon="check" tone="success" tip="Confirmed" size="xl" />

API reference

Round tinted icon with a hover and focus tooltip, for compact status markers.

Props

PropType and valuesDefaultDescription

iconstring'circle'Icon name.

tonebrandskysuccesswarningdangerneutral'brand'Tint color. Unknown values fall back to brand.

tipstring—Tooltip text shown on hover and keyboard focus.

sizexssmmdlgxl'md'Diameter: xs 24, sm 30, md 36, lg 44, xl 52 px; a number is used as px.

Notes

Focusable (tabindex 0) so the tooltip works from the keyboard; the icon itself is aria-hidden, so put the meaning in tip.