Empty
Usage
No projects found
Title
Use the title prop to set the title of the empty state.
No projects found
<template>
<PEmpty title="No projects found" />
</template>
Description
Use the description prop to set the description of the empty state.
No projects found
<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.
No projects found
<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.
No projects found
<template>
<PEmpty
:avatar="{
src: 'https://github.com/nuxt.png'
}"
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 actions to the empty state.
No projects found
<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."
:actions="[
{
icon: 'i-lucide:plus',
label: 'Create new'
},
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Variant
Use the variant prop to change the variant of the empty state.
No notifications
<template>
<PEmpty
variant="naked"
icon="i-lucide:bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Size
Use the size prop to change the size of the empty state.
No notifications
<template>
<PEmpty
size="xl"
icon="i-lucide:bell"
title="No notifications"
description="You're all caught up. New notifications will appear here."
:actions="[
{
icon: 'i-lucide:refresh-cw',
label: 'Refresh',
color: 'neutral',
variant: 'subtle'
}
]"
/>
</template>
Examples
With slots
Use the available slots to create a more complex empty state.
<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
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | string | objectThe icon displayed above the title. | |
avatar | PAvatarProps
| |
title | string | |
description | string | |
actions | PButtonProps[]Display a list of Button in the body.
| |
variant | 'outline' | "outline" | "solid" | "soft" | "subtle" | "naked" |
size | 'md' | "md" | "xs" | "sm" | "lg" | "xl" |
pohon | { root?: ClassValue; header?: ClassValue; avatar?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; actions?: ClassValue; footer?: ClassValue; } |
Slots
| Slot | Type |
|---|---|
header | object |
leading | { pohon: object; } |
title | object |
description | object |
body | object |
actions | object |
footer | object |
Theme
Below is the theme configuration skeleton for the PEmpty. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
empty: {
slots: {
root: '',
header: '',
avatar: '',
title: '',
description: '',
body: '',
actions: '',
footer: ''
},
variants: {
size: {
xs: {
avatar: '',
title: '',
description: ''
},
sm: {
avatar: '',
title: '',
description: ''
},
md: {
avatar: '',
title: '',
description: ''
},
lg: {
avatar: '',
title: '',
description: ''
},
xl: {
avatar: '',
title: '',
description: ''
}
},
variant: {
solid: {
root: '',
title: '',
description: ''
},
outline: {
root: '',
description: ''
},
soft: {
root: '',
description: ''
},
subtle: {
root: '',
description: ''
},
naked: {
description: ''
}
}
},
defaultVariants: {
variant: 'outline',
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
empty: {
slots: {
root: '',
header: '',
avatar: '',
title: '',
description: '',
body: '',
actions: '',
footer: ''
},
variants: {
size: {
xs: {
avatar: '',
title: '',
description: ''
},
sm: {
avatar: '',
title: '',
description: ''
},
md: {
avatar: '',
title: '',
description: ''
},
lg: {
avatar: '',
title: '',
description: ''
},
xl: {
avatar: '',
title: '',
description: ''
}
},
variant: {
solid: {
root: '',
title: '',
description: ''
},
outline: {
root: '',
description: ''
},
soft: {
root: '',
description: ''
},
subtle: {
root: '',
description: ''
},
naked: {
description: ''
}
}
},
defaultVariants: {
variant: 'outline',
size: 'md'
}
}
}
};