Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Empty with Multiple Actions Empty State for React

An empty upload state titled No files uploaded, with Upload File and Import from URL side by side.

An upload icon, the title No files uploaded, and a line about uploading or importing. Upload File and Import from URL sit side by side, each with an icon.

Use it when content can come from the computer or from a URL. If there is only one way in, keep a single Button. In React, Base UI does not upload or import the file.

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

Anatomy

Empty anatomy: root, header, media, title, description, content

Usage

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <UploadIcon aria-hidden="true" />
    </EmptyMedia>
    <EmptyTitle>No files uploaded</EmptyTitle>
    <EmptyDescription>
      Upload files from your computer or import from a URL.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <div className="flex gap-2">
      <Button>
        <UploadIcon aria-hidden="true" data-icon="inline-start" />
        Upload File
      </Button>
      <Button variant="outline">
        <LinkIcon aria-hidden="true" data-icon="inline-start" />
        Import from URL
      </Button>
    </div>
  </EmptyContent>
</Empty>

FAQ

How are Upload File and Import from URL shown?

Both are in a div with flex gap-2 inside EmptyContent. Upload File is a default Button with an UploadIcon icon. Import from URL is variant="outline" with a LinkIcon icon.

Does the header use the same icon?

Yes. UploadIcon is in EmptyMedia with variant="icon", and the Upload File button uses UploadIcon again. Import from URL uses LinkIcon.

What does the description say?

EmptyTitle is "No files uploaded". EmptyDescription says to upload files from the computer or import from a URL.

Which button is the filled one?

Upload File has no variant, so it is the default filled button. Import from URL sets variant="outline".

Do the buttons upload or import anything?

No. They are labels and icons only. Attach the upload handler to Upload File and the URL flow to Import from URL.

Are the icons part of the button names?

The names are the text labels. Mark every UploadIcon and the LinkIcon icon aria-hidden, including the one in EmptyMedia.

API Reference

Empty

Sets variant="icon". The rest is on the Empty page.

Button

Sets variant="outline". The rest is on the Button page.

All 22 empty state examples