Primitives

Spinner

Indeterminate progress. Takes its color from whatever it sits in, so it needs no variant per surface.

Size

Use size in pixels. Stroke width is derived from it, so a small ring does not read as a smudge.

<Spinner size={16} />
<Spinner size={20} />
<Spinner size={24} />
<Spinner size={32} />

Inside a button

Button renders one for you when loading is set, in whatever color the variant is. The label stays in the box under it, so the button is the same width busy as idle.

<Button>Publishing</Button>
<Button loading>Publishing</Button>

<Button variant="secondary">Save draft</Button>
<Button variant="secondary" loading>Save draft</Button>

Props

Prop	Type	Default	Notes
`size`	`number`	—	Pixels, and stroke width is derived from it. Left off, the ring is two under the glyph size its container asked for, which is 16 on a page and 14, 16 or 18 inside a small, medium or large Button.
`label`	`string`	—	Announced as a live region. Omit inside a control that already reports busy.