Tulip Logo IconTulip
Components

Empty

Use the Empty component to display an empty state.

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Learn More

Usage

import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@tulip-systems/core/components";
<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <FolderIcon />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button>Add data</Button>
  </EmptyContent>
</Empty>

Examples

Outline

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Background

No Notifications

You're all caught up. New notifications will appear here.

Avatar

LR
User Offline

This user is currently offline. You can leave a message to notify them or try again later.

Avatar Group

CNLRER
No Team Members
Invite your team to collaborate on this project.

Input Group

404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

On this page