Empty
Import
import { VKEmpty } from "@vivakits/react-components";When To Use
- When no data is present in a list or table
- To provide a friendly placeholder for empty states
- To guide users on next steps when content is missing
Basic
A basic example of the VKEmpty component.
No Data Found
Description
An example of VKEmpty with a custom description.
This is a custom description for the empty state.
Custom Image
An example of VKEmpty with a custom image.
Custom Empty Image
Different Sizes
An example of VKEmpty with different sizes.
Extra Small
Small
Medium
Large
Extra Large
2X Large
Different Orientations
An example of VKEmpty with different orientations.
Horizontal
Horizontal Reverse
Vertical
Vertical Reverse
Empty Select Field
An example of VKSelect with an empty state.
Select
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| description | string | Custom description text for the empty state | No Data Found |
| customImage | ReactNode | Custom image to display in the empty state | - |
| imageClassName | string | Custom styling for the image | - |
| size | xssmmdlgxl2xl | Changes the size of the empty state | md |
| orientation | horizontalverticalhorizontal-reversevertical-reverse | Changes the orientation of the empty state | vertical |
| className | string | Custom class name for the container | - |
| labelClassName | string | Custom class name for the description label | - |