Spinner

A spinning circle for work in progress.

import { Spinner } from '@kition/tessera-ui'

Playground

Props

size

label

What is shown

import { Spinner } from '@kition/tessera-ui'

<Spinner size={20} label="Saving…" />

When to use

Inside a button while its action runs (Button loading).
Next to a status that is still updating.

When not to

Long work with known progress: show the progress.

Examples

Sizes and a label

Syncing…

spinner.tsx

import { Spinner } from '@kition/tessera-ui'

export default function Demo() {
  return (
    <div className="demo-row">
      <Spinner />
      <Spinner size={24} label="Loading the workspace" />
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--kit-text-muted)' }}>
        <Spinner size={14} /> Syncing…
      </span>
    </div>
  )
}

Props

Spinner

A spinning circle for work in progress; label names it for screen readers (otherwise it is decorative).

Prop	Type	Default
`size`	`number`	`16`
`label`	`string`	—
`className`	`string`	—