Spinner v0.1.0 Feedback

Indeterminate loading indicator with an accessible label.

import { Spinner } from "latticeui-react";

Examples

Sizes

Show code

<Spinner size="sm" />
<Spinner />
<Spinner size="lg" label="Loading results" />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`span`	`[data-scope="spinner"][data-part="root"]`

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`label`	`string`	`"Loading"`

Accessibility

Roles: status

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="spinner"][data-part="root"] {
  /* your overrides */
}

Component tokens: --spinner-size

State attributes: data-size