Phi / Empty

<script setup>
import { Button } from "@dicehub/phi/components/button";
import { Empty } from "@dicehub/phi/components/empty";
import { PhCode, PhGlobe, PhPackage } from "@phosphor-icons/vue";
</script>

<template>
  <Empty
    :icon="PhPackage"
    title="No packages found"
    description="Get started by installing your first package."
    command-line="pnpm add @dicehub/phi@beta"
  >
    <Button :icon="PhCode">See examples</Button>
    <Button :icon="PhGlobe" variant="primary">View documentation</Button>
  </Empty>
</template>

Installation

Barrel

import { Empty } from "@dicehub/phi";

Granular

import { Empty } from "@dicehub/phi/components/empty";

Usage

<script setup>
import { Empty } from "@dicehub/phi/components/empty";
import { PhPackage } from "@phosphor-icons/vue";
</script>

<template>
  <Empty
    :icon="PhPackage"
    title="No packages found"
    description="Get started by installing your first package."
    command-line="pnpm add @dicehub/phi@beta"
  />
</template>

Examples

Basic

<script setup>
import { Empty } from "@dicehub/phi/components/empty";
</script>

<template>
  <Empty
    title="No results found"
    description="Try adjusting your search or filter to find what you're looking for."
  />
</template>

Sizes

Empty states come in three sizes to fit different container contexts.

<script setup>
import { Empty } from "@dicehub/phi/components/empty";
import { PhDatabase } from "@phosphor-icons/vue";
</script>

<template>
  <Empty
    size="sm"
    :icon="PhDatabase"
    title="No data available"
    description="There is no data to display."
  />
  <Empty
    size="base"
    :icon="PhDatabase"
    title="No data available"
    description="There is no data to display."
  />
  <Empty
    size="lg"
    :icon="PhDatabase"
    title="No data available"
    description="There is no data to display."
  />
</template>

With Command Line

Include a copyable command to help users get started.

<script setup>
import { Empty } from "@dicehub/phi/components/empty";
import { PhFolderOpen } from "@phosphor-icons/vue";
</script>

<template>
  <Empty
    :icon="PhFolderOpen"
    title="No projects found"
    description="Get started by creating your first project using the command below."
    command-line="pnpm create phi-project"
  />
</template>

With Actions

Add custom action buttons using the default slot.

<script setup>
import { Button } from "@dicehub/phi/components/button";
import { Empty } from "@dicehub/phi/components/empty";
import { PhCloudSlash } from "@phosphor-icons/vue";
</script>

<template>
  <Empty
    :icon="PhCloudSlash"
    title="No connection"
    description="Unable to connect to the server. Please check your connection and try again."
  >
    <Button variant="primary">Retry</Button>
    <Button variant="secondary">Go Back</Button>
  </Empty>
</template>

Minimal

At minimum, only a title is required.

<script setup>
import { Empty } from "@dicehub/phi/components/empty";
</script>

<template>
  <Empty title="Nothing here" />
</template>

API Reference

Prop	Type	Default	Description
`size`	`"sm" \| "base" \| "lg"`	`"base"`	Size of the empty state container.
`icon`	`Component`	`-`	Decorative Vue icon component displayed above the title.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`title`	`string`	`-`	Required primary heading text for the empty state.
`description`	`string`	`-`	Secondary description text displayed below the title.
`commandLine`	`string`	`-`	Shell command displayed in a copyable command block.
`labels`	`{ copyCommand?: string; copiedCommand?: string }`	`{}`	Accessible labels and copied feedback for the command copy button.
`@copy-command`	`(details: { command: string }) => void`	`-`	Emitted after the command is copied.
`#icon`	`slot`	`-`	Custom icon slot. Overrides the icon prop.
`default slot`	`slot`	`-`	Additional action content rendered below the description or command.