Dot
A standalone status dot: a bare indicator in any tone, with optional ping, glow, and pulse.
Live demo
Dot is the bare indicator for "presence without a full chip": a connection light in a titlebar, a per-row streaming pip, an online/offline marker. tone colors it across the six semantic roles (plus the accent variants and named hues), size picks sm, md, or lg, and a color escape hatch paints any raw value past the tone set (a color-mix(...) expression, a per-state color from a status map).
Three composable animations layer on: ping radiates an expanding ring, glow adds a soft halo, and pulse breathes the dot at a slow or fast cadence; all three hold still under prefers-reduced-motion. It ships as a first-class element that self-styles in its own shadow root, so a shadow-DOM consumer with no global stylesheet gets it for free, and the .xtyle-dot utility class stays available for global-CSS pages. A labelled dot is exposed as a named role="img"; an unlabelled one is decorative and hidden from assistive tech.
When to use
How this component composes with the rest of the set.
ping + glow for a strong live indicator; add pulse for a quieter breathe when a full ping ring is too loud. color for a per-state palette wider than the tone set (a run-state map, a color-mix(...) expression); tone covers the common semantic cases. Props
7 props, straight from the manifest.
| Prop | Type | Default | Bindings | Description |
|---|---|---|---|---|
Appearance
Variants
accent
accent-toned dot.
neutral
neutral-toned dot.
danger
danger-toned dot.
success
success-toned dot.
warn
warn-toned dot.
info
info-toned dot.
accent-2
accent-2-toned dot.
accent-3
accent-3-toned dot.
accent-4
accent-4-toned dot.
red
red-toned dot.
orange
orange-toned dot.
yellow
yellow-toned dot.
green
green-toned dot.
blue
blue-toned dot.
purple
purple-toned dot.
brown
brown-toned dot.
pink
pink-toned dot.
cyan
cyan-toned dot.
gray
gray-toned dot.
white
white-toned dot.
black
black-toned dot.
Sizes
sm
Compact.
md
Default.
lg
Large.
States
ping
An expanding ring radiates outward on a loop.
glow
A soft halo in the dot color.
pulse-slow
Slow opacity breathe.
pulse-fast
Fast opacity breathe.
Anatomy
The named parts that make up the component, with their selectors.
dot
The dot itself: a full-radius circle filled with the resolved --dot-color.
ping
The expanding ring on a ping dot: an ::after clone that scales out and fades on a loop.
Tokens & coverage
What the component consumes, checked live against what the algorithm produces.
Live coverage check against the xtyle-default register
(derive(xtyleDefault, { anchors }) →
coverComponent(manifest, register)). Every token this component
consumes must be a key the algorithm produces.
--accent
--accent-2
--accent-3
--accent-4
--black
--blue
--border-thin
--brown
--cyan
--danger
--ease-standard
--gray
--green
--info
--neutral
--orange
--pink
--purple
--radius-full
--red
--space-2
--space-3
--space-4
--success
--warn
--white
--yellow
Accessibility
role="img", so its meaning does not rest on color alone. ping, glow shimmer, pulse) hold still under prefers-reduced-motion. Code
Tones, states, and the color escape hatch
A labelled status dot, a live ping, a glowing accent, and a raw custom color.
<xtyle-dot tone="success" label="Online"></xtyle-dot>
<xtyle-dot tone="danger" ping label="Live"></xtyle-dot>
<xtyle-dot tone="accent" glow size="lg"></xtyle-dot>
<xtyle-dot color="#a855f7" ping></xtyle-dot><script lang="ts">
import { Dot } from "@xtyle/svelte";
</script>
<Dot tone="success" label="Online" />
<Dot tone="danger" ping label="Live" />
<Dot tone="accent" glow size="lg" />
<Dot color="#a855f7" ping />---
import Dot from "@xtyle/astro/Dot.astro";
---
<Dot tone="success" label="Online" />
<Dot tone="danger" ping label="Live" />
<Dot tone="accent" glow size="lg" />
<Dot color="#a855f7" ping />