Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Empty State examples · Actions

Empty with Stacked Actions Empty State for React

An empty team state with full-width Invite Team Member and Import from CSV buttons, one above the other.

Framework
UI library

Two actions with equal weight, one above the other. Under a people icon, the title No team members yet and a description, EmptyContent holds two full-width buttons: Invite Team Member and an outline Import from CSV. Use it in narrow panels and on small screens where a row of buttons would wrap.

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 do the buttons stack?

They are direct children of EmptyContent, which is a column. Each Button has className="w-full", so both stretch to the content width.

Which button is filled?

Invite Team Member has no variant and includes UserPlusIcon. Import from CSV sets variant="outline" and includes UploadIcon. Invite is first.

What separates the two buttons?

EmptyContent is a column with a gap, so the buttons separate without a margin class of their own. The header icon is UsersIcon in EmptyMedia with variant="icon".

What does the empty team say?

EmptyTitle is "No team members yet". EmptyDescription says to invite team members to collaborate on projects.

How do I put the buttons on one row?

Wrap them in a div with flex gap-2 and drop w-full. This demo leaves them as column children so they stack.

Do the icons change the button names?

No. The names are Invite Team Member and Import from CSV. Mark UserPlusIcon, UploadIcon, and UsersIcon aria-hidden.

All 22 empty state examples