FEEDBACK

Spinner

Lightweight SVG spinner with an accessible role="status" announcement. Use for compact, indeterminate loading states inside buttons, list rows or tooltips. For full bars reach for Progress.

Import

import { Spinner } from 'damo-ui'

Sizes

1<Spinner size={16} />
2<Spinner size={20} />
3<Spinner size={32} />

Color override

Spinner uses currentColor — change the wrapper's text color to retint.

1<Spinner className="text-secondary" />
2<Spinner className="text-success" />

Props

Spinner props
PropTypeDefaultDescription
sizenumber | string20Width and height of the SVG. Pass any number (px) or CSS unit string.
labelstring'Caricamento…'Accessible name announced by screen readers (aria-label). Localize for non-Italian UIs.
classNamestring—Tailwind classes are merged on top of the spin animation + primary color.

Accessibility

  • Renders role="status" with the supplied label as aria-label.
  • For inline use inside a labelled button, set label="" and rely on the button's own text — avoid duplicate announcements.
← ProgressSkeleton →