LoadingPill
A small pill with a spinner that says something is loading, shown only once loading has lasted 300ms.
import { LoadingPill } from "@butteryui/react";Demo
When to use it
Use it for
- A chart or panel waiting for its data, centered over its box
- A refresh that keeps the old content in place while it loads
Not for
- A table or list's first load: show skeleton rows shaped like the content
- A button's own action: use Button's loading state
Examples
Basic
A pill on its own: loading is true by default, and it shows once that has lasted 300ms.
Chart loading
A revenue card that keeps its size while another week's numbers load, the pill centered in the box.
$12,480
Slow refresh
A refresh that takes a while: the pill appears only once it's been loading for 300ms, and goes when it's done.
Orders updated an hour ago
Variants and states
Loading
It appears 300ms after loading starts.
Props
LoadingPill
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Loading" | What's loading, beside the spinner and announced. Defaults to "Loading". |
loading | boolean | true | Whether something is loading. The pill shows once this has been true for --bt-delay-loading (300ms),
so a quick load never flashes it, and fades away as soon as it turns false. Defaults to true. |
announce | boolean | true | Whether its words are read out as it shows. Defaults to true; turn it off when something around it
already says it's loading, such as a card marked busy. |
It also takes MotionElementProps<"div">.
Accessibility
A polite status region stays mounted and gets its words when the pill appears, so they're announced, unless announce is off because something around it, such as a card marked busy, already says it's loading; the pill itself is hidden from screen readers. The spinner is decorative and holds still with reduced motion.
It takes no keyboard input of its own.
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: It still waits 300ms, then fades in and out over 100ms, and its spinner holds still.
Layout
A pill 28px tall (--bt-h-sm) and as wide as its 14px spinner and its label, padded 12px a side; it never wraps or shrinks. It takes no presses, so it has no hit area.