Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Patterns

Loading States Button Group for React

Buttons that disable themselves and change their label while an action runs, and a group that locks every button until it finishes.

Framework
UI library

Feedback while an action runs, in two styles. In the first group the pressed button turns off and changes its label, Copying..., Downloading... or Sharing..., while its neighbors stay usable. In the second, pressing any action locks all three until it's done. The demo fakes the work with a two-second timer.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the running action tracked?

One value holds the running action's name, or nothing. Each button carries its name as its value; pressing it stores the name and starts a two-second timer that clears it.

How does the first group behave?

Only the pressed button is disabled and shows its pending label, such as Copying.... The other two stay enabled.

How does the second group behave?

Every button is disabled while any action runs, including one started from the first group. Their labels don't change.

What happens to the timer if the demo goes away?

It's cleared when the demo unmounts, and a new press clears the previous timer before starting its own.

How do I show a spinner instead?

Pass isLoading to the Button. It disables the button and draws a Spinner over the label, keeping the width. The demo changes the label instead.

How do I use a real request?

Set the value before the request starts and clear it when the request settles, success or error, instead of using the timer.

All 39 button group examples