shadcn.io is an independent project built on shadcn/ui
A square button is disabled and holds only a spinner. There is no visible word. The button's name is Loading, and the spinner is hidden so it is not announced twice. No request runs.
Use it for a toolbar action such as refresh, where a label will not fit. Keep the accessible name. A labeled wait can use a normal button. A known percent fits Progress. In Vue, Ark UI would label the spinner Loading, so this file hides it.
Installation
Anatomy
Usage
<Button aria-label="Loading" :disabled="true" size="icon-md">
<Spinner aria-hidden="true" />
</Button>FAQ
Why is the button a square?
size is icon-md on the Button, which is the icon-only size. The only child is a Spinner at the default size-4, so the wheel sits in the square with the button's padding around it.
Why is the icon button disabled?
So it can't be pressed again while it shows the spinner. disabled is set, and the square keeps its size at reduced opacity.
What name does the button have if there is no text?
aria-label is Loading on the Button, the name assistive tech reads. The Spinner has aria-hidden="true", so its own Loading status isn't announced twice.
Does this spinner need data-icon?
This file leaves data-icon off, because the spinner is the only child and there is no label to space it against. On a button that also has text, set data-icon to inline-start.
API Reference
Button
Sets aria-label="Loading", disabled and size="icon-md". The rest is on the Button page.
Spinner
Sets aria-hidden. The rest is on the Spinner page.
