Filled presence mark for online, live, and similar status chips.
Also known as: presence dot, online dot, live indicator, status indicator
Install with the CLI, or copy the component source into your project.
Add status-dot (npm)
1npx --yes -p github:itsvigneshv/default-file-ui#main df-ui add status-dot
Filled presence mark at the default md diameter.
Diameter steps from xs to xl.
Prefer StatusDot in Badge leading for online and live chips. Omit size so the mark follows the badge.
Filled presence mark for online, live, and offline chips. Uses currentColor. Prefer inside Badge leading so the mark follows the badge size when size is omitted.
| Prop | Type | Default | Notes |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "xl" | - | Diameter step. Omit inside Badge to inherit the badge size step. Outside Badge, the default diameter is md. |
| className | string | - | Additional styles on the mark. |
| …HTML attributes | HTMLAttributes<HTMLSpanElement> | - | Standard element attributes. Decorative by default (aria-hidden). Set aria-hidden false and an accessible name when the mark is meaningful without adjacent text. |
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-status-dot-size-xs | CSS length | calc(1.5 * var(--spacing-unit)) | xs diameter. |
| --df-status-dot-size-sm | CSS length | calc(1.75 * var(--spacing-unit)) | sm diameter. |
| --df-status-dot-size-md | CSS length | calc(2 * var(--spacing-unit)) | md diameter. Default when size is omitted outside a sized host. |
| --df-status-dot-size-lg | CSS length | calc(2.25 * var(--spacing-unit)) | lg diameter. |
| --df-status-dot-size-xl | CSS length | calc(2.5 * var(--spacing-unit)) | xl diameter. |