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.

import { Button } from "@smartacteam/ambient-web/button";
import { Empty } from "@smartacteam/ambient-web/empty";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function EmptyDemo() {
  return (
    <Empty.Root>
      <Empty.Header>
        <Empty.Media variant="icon">
          <CentralIcon
            name="IconCode"
            fill="outlined"
            radius="2"
            stroke="1.5"
          />
        </Empty.Media>
        <Empty.Title>No Projects Yet</Empty.Title>
        <Empty.Description>
          You haven&apos;t created any projects yet. Get started by creating
          your first project.
        </Empty.Description>
      </Empty.Header>
      <Empty.Content className="flex-row justify-center gap-2">
        <Button variant="primary">Create Project</Button>
        <Button variant="default">Import Project</Button>
      </Empty.Content>
      <Button
        size="sm"
        variant="text"
        nativeButton={false}
        render={<a href="#" />}
        className="text-text-secondary underline-offset-4 hover:underline"
      >
        <span>Learn More</span>
        <CentralIcon
          radius="2"
          stroke="1.5"
          fill="outlined"
          name="IconSquareArrowTopRight"
        />
      </Button>
    </Empty.Root>
  );
}

Usage

import { Empty } from "@smartacteam/ambient-web/empty";

<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <Icon />
    </Empty.Media>
    <Empty.Title>No data</Empty.Title>
    <Empty.Description>No data found</Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button>Add data</Button>
  </Empty.Content>
</Empty.Root>

Examples

Outlined

Use the border utility class to create an outline empty state.

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

import { Button } from "@smartacteam/ambient-web/button";
import { Empty } from "@smartacteam/ambient-web/empty";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function EmptyOutlineDemo() {
  return (
    <Empty.Root className="border border-dashed border-stroke-default">
      <Empty.Header>
        <Empty.Media variant="icon">
          <CentralIcon
            name="IconCloudUpload"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Empty.Media>
        <Empty.Title>Cloud Storage Empty</Empty.Title>
        <Empty.Description>
          Upload files to your cloud storage to access them anywhere.
        </Empty.Description>
      </Empty.Header>
      <Empty.Content>
        <Button size="sm">Upload Files</Button>
      </Empty.Content>
    </Empty.Root>
  );
}

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

No Notifications

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

import { Button } from "@smartacteam/ambient-web/button";
import { Empty } from "@smartacteam/ambient-web/empty";
import { CentralIcon } from "@smartacteam/ambient-web/icon";

export function EmptyBackgroundDemo() {
  return (
    <Empty.Root className="h-full bg-surface-inset">
      <Empty.Header>
        <Empty.Media variant="icon">
          <CentralIcon
            name="IconBell"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
        </Empty.Media>
        <Empty.Title>No Notifications</Empty.Title>
        <Empty.Description className="max-w-xs text-pretty">
          You&apos;re all caught up. New notifications will appear here.
        </Empty.Description>
      </Empty.Header>
      <Empty.Content>
        <Button>
          <CentralIcon
            name="IconArrowsRepeatCircle"
            radius="2"
            stroke="1.5"
            fill="outlined"
          />
          Refresh
        </Button>
      </Empty.Content>
    </Empty.Root>
  );
}

Avatar

Use the <Empty.Media/> component to display an avatar in the empty state.

User Offline

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

import { Avatar } from "@smartacteam/ambient-web/avatar";
import { Button } from "@smartacteam/ambient-web/button";
import { Empty } from "@smartacteam/ambient-web/empty";

export function EmptyAvatarDemo() {
  return (
    <Empty.Root>
      <Empty.Header>
        <Empty.Media variant="default">
          <Avatar.Root className="size-12">
            <Avatar.Image
              src="https://github.com/ilikescience.png"
              className="grayscale"
            />
            <Avatar.Fallback>LR</Avatar.Fallback>
          </Avatar.Root>
        </Empty.Media>
        <Empty.Title>User Offline</Empty.Title>
        <Empty.Description>
          This user is currently offline. You can leave a message to notify them
          or try again later.
        </Empty.Description>
      </Empty.Header>
      <Empty.Content>
        <Button size="sm">Leave Message</Button>
      </Empty.Content>
    </Empty.Root>
  );
}

Input Group

You can add an InputGroup component to the <Empty.Content /> component.

404 - Not Found

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

/

Need help? Contact support

import { Empty } from "@smartacteam/ambient-web/empty";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { InputGroup } from "@smartacteam/ambient-web/input-group";
import { Kbd } from "@smartacteam/ambient-web/kbd";

export function EmptyInputGroupDemo() {
  return (
    <Empty.Root>
      <Empty.Header>
        <Empty.Title>404 - Not Found</Empty.Title>
        <Empty.Description>
          The page you&apos;re looking for doesn&apos;t exist. Try searching for
          what you need below.
        </Empty.Description>
      </Empty.Header>
      <Empty.Content>
        <InputGroup.Root className="sm:w-3/4">
          <InputGroup.Input
            render={<Input.Text />}
            placeholder="Try searching for pages..."
          />
          <InputGroup.Addon>
            <CentralIcon
              name="IconMagnifyingGlass"
              radius="2"
              stroke="1.5"
              fill="outlined"
            />
          </InputGroup.Addon>
          <InputGroup.Addon align="inline-end">
            <Kbd.Item>/</Kbd.Item>
          </InputGroup.Addon>
        </InputGroup.Root>
        <Empty.Description>
          Need help? <a href="#">Contact support</a>
        </Empty.Description>
      </Empty.Content>
    </Empty.Root>
  );
}