shadcn.io is an independent project built on shadcn/ui
A secondary button is disabled. A spinner sits before the words Saving Changes. The spinner is hidden from assistive tech. No save runs.
Use the secondary style for a side action such as saving a draft. The label should name the action that is running. A long save with a percent fits Progress. In React, Base UI does not watch the save. You show the spinner.
Installation
Anatomy
Usage
<Button disabled variant="secondary">
<Spinner aria-hidden="true" data-icon="inline-start" />
Saving Changes
</Button>FAQ
How is this a secondary button?
variant is secondary on the Button. The children are the Spinner and the text Saving Changes. disabled is set, so the button can't be pressed again.
How does the spinner line up with Saving Changes?
The Spinner is the first child, with data-icon set to inline-start. That uses the button's icon spacing, so the wheel sits in front of the words.
What color is the spinner here?
The icon uses currentColor, so it takes the secondary button's text color. This file sets no extra color class on the Spinner.
Why does the label say Saving Changes?
That string is the button's text in this file. It tells people which action is running. Swap it for another short status and leave the Spinner and variant as they are.
API Reference
Button
Sets disabled and variant="secondary". The rest is on the Button page.
Spinner
Sets aria-hidden and data-icon="inline-start". The rest is on the Spinner page.
