Empty
A component used to display a message when there is no data to show.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add empty
Usage
<template>
<UiEmpty>
<UiEmptyHeader>
<UiEmptyMedia variant="icon">
<Icon />
</UiEmptyMedia>
</UiEmptyHeader>
<UiEmptyTitle>No data</UiEmptyTitle>
<UiEmptyDescription>No data found</UiEmptyDescription>
<UiEmptyContent>
<Button>Add data</Button>
</UiEmptyContent>
</UiEmpty>
</template>
Examples
Basic
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
Outline
Cloud Storage UiEmpty
Upload files to your cloud storage to access them anywhere.
Background
No Notifications
You're all caught up. New notifications will appear here.
Avatar
BB
User Offline
This user is currently offline. You can leave a message to notify them or try again later.
Avatar Group
CNBBMI
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