# Empty

> A component to display an empty state.

## Usage

<code-preview>
<p-empty :actions="[{"icon":"i-lucide:plus","label":"Create new"},{"icon":"i-lucide:refresh-cw","label":"Refresh","color":"neutral","variant":"subtle"}]" description="It looks like you haven't added any projects. Create one to get started." icon="i-lucide:file" title="No projects found">



</p-empty>
</code-preview>

### Title

Use the `title` prop to set the title of the empty state.

```vue
<template>
  <PEmpty title="No projects found" />
</template>
```

### Description

Use the `description` prop to set the description of the empty state.

```vue
<template>
  <PEmpty title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>
```

### Icon

Use the `icon` prop to set the icon of the empty state.

```vue
<template>
  <PEmpty icon="i-lucide:file" title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>
```

### Avatar

Use the `avatar` prop to set the avatar of the empty state.

```vue
<template>
  <PEmpty title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>
```

### Actions

Use the `actions` prop to add some [Button](/docs/pohon/components/button) actions to the empty state.

```vue
<template>
  <PEmpty icon="i-lucide:file" title="No projects found" description="It looks like you haven't added any projects. Create one to get started." />
</template>
```

### Variant

Use the `variant` prop to change the variant of the empty state.

```vue
<template>
  <PEmpty variant="naked" icon="i-lucide:bell" title="No notifications" description="You're all caught up. New notifications will appear here." />
</template>
```

### Size

Use the `size` prop to change the size of the empty state.

```vue
<template>
  <PEmpty size="xl" icon="i-lucide:bell" title="No notifications" description="You're all caught up. New notifications will appear here." />
</template>
```

## Examples

### With slots

Use the available slots to create a more complex empty state.

```vue [EmptySlotsExample.vue]
<script setup lang="ts">
import type { PUserProps } from 'pohon-ui';

const members: Array<PUserProps> = [
  {
    name: 'Daniel Roe',
    description: 'danielroe',
    to: 'https://github.com/danielroe',
    target: '_blank',
    avatar: {
      src: 'https://github.com/danielroe.png',
      alt: 'danielroe',
    },
  },
  {
    name: 'Pooya Parsa',
    description: 'pi0',
    to: 'https://github.com/pi0',
    target: '_blank',
    avatar: {
      src: 'https://github.com/pi0.png',
      alt: 'pi0',
    },
  },
  {
    name: 'Sébastien Chopin',
    description: 'atinux',
    to: 'https://github.com/atinux',
    target: '_blank',
    avatar: {
      src: 'https://github.com/atinux.png',
      alt: 'atinux',
    },
  },
  {
    name: 'praburangki',
    description: 'praburangki',
    to: 'https://github.com/praburangki',
    target: '_blank',
    avatar: {
      src: 'https://github.com/praburangki.png',
      alt: 'praburangki',
    },
  },
];
</script>

<template>
  <PEmpty
    title="No team members"
    description="Invite your team to collaborate on this project."
    variant="naked"
    :actions="[{
      label: 'Invite members',
      icon: 'i-lucide:user-plus',
      color: 'neutral',
    }]"
  >
    <template #leading>
      <PAvatarGroup size="xl">
        <PAvatar
          src="https://github.com/nuxt.png"
          alt="Nuxt"
        />
        <PAvatar
          src="https://github.com/unjs.png"
          alt="Unjs"
        />
      </PAvatarGroup>
    </template>

    <template #footer>
      <PSeparator class="my-4" />

      <div class="gap-4 grid grid-cols-2">
        <div
          v-for="(member, index) in members"
          :key="index"
          class="rounded-lg bg-background flex ring ring-ring transition relative hover:bg-background-elevated/50 has-focus-visible:(ring-2 ring-primary)"
        >
          <div class="p-4 flex flex-1 flex-col gap-x-8 gap-y-4 relative sm:p-4 lg:grid">
            <PUser
              :avatar="member.avatar"
              :name="member.name"
              :description="member.description"
              :pohon="{ name: 'truncate' }"
            />
          </div>

          <a
            :href="member.to"
            rel="noopener"
            aria-label="Card link"
            class="peer focus:outline-none"
            :target="member.target"
          ><span
            class="inset-0 absolute"
            aria-hidden="true"
          /></a>
        </div>
      </div>
    </template>
  </PEmpty>
</template>
```

## API

### Props

```ts
/**
 * Props for the Empty component
 */
interface EmptyProps {
  /**
   * The element or component this component should render as.
   */
  as?: any;
  /**
   * The icon displayed above the title.
   */
  icon?: string | object;
  avatar?: PAvatarProps;
  title?: string;
  description?: string;
  /**
   * Display a list of Button in the body.
   */
  actions?: PButtonProps[];
  variant?: "outline" | "solid" | "soft" | "subtle" | "naked";
  size?: "md" | "xs" | "sm" | "lg" | "xl";
  pohon?: { root?: ClassValue; header?: ClassValue; avatar?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; actions?: ClassValue; footer?: ClassValue; };
}
```

### Slots

```ts
/**
 * Slots for the Empty component
 */
interface EmptySlots {
  header(): any;
  leading(): any;
  title(): any;
  description(): any;
  body(): any;
  actions(): any;
  footer(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  pohon: {
    empty: {
      slots: {
        root: 'relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0',
        header: 'flex flex-col items-center gap-2 max-w-sm text-center',
        avatar: 'shrink-0 mb-2',
        title: 'color-text-highlighted text-pretty font-medium',
        description: 'text-balance text-center',
        body: 'flex flex-col items-center gap-4 max-w-sm',
        actions: 'flex flex-wrap justify-center gap-2 shrink-0',
        footer: 'flex flex-col items-center gap-2 max-w-sm'
      },
      variants: {
        size: {
          xs: {
            avatar: 'akar:(size-8 text-base)',
            title: 'text-sm',
            description: 'text-xs'
          },
          sm: {
            avatar: 'akar:(size-9 text-lg)',
            title: 'text-sm',
            description: 'text-xs'
          },
          md: {
            avatar: 'akar:(size-10 text-xl)',
            title: 'text-base',
            description: 'text-sm'
          },
          lg: {
            avatar: 'akar:(size-11 text-[22px])',
            title: 'text-base',
            description: 'text-sm'
          },
          xl: {
            avatar: 'akar:(size-12 text-2xl)',
            title: 'text-lg',
            description: 'text-base'
          }
        },
        variant: {
          solid: {
            root: 'bg-background-inverted',
            title: 'color-text-inverted',
            description: 'color-text-dimmed'
          },
          outline: {
            root: 'bg-background ring ring-ring',
            description: 'color-text-muted'
          },
          soft: {
            root: 'bg-background-elevated/50',
            description: 'color-text-toned'
          },
          subtle: {
            root: 'bg-background-elevated/50 ring ring-ring',
            description: 'color-text-toned'
          },
          naked: {
            description: 'color-text-muted'
          }
        }
      }
    }
  }
})
```

## Changelog

<docs-component-changelog>



</docs-component-changelog>