Components
Empty
Overview
The <Empty /> component should be used when data is missing, replacing the normal component.
Empty.Icon
The <Empty.Icon /> is a default <Ufo /> icon with styling.
Empty.Title
The <Empty.Title /> is used to display a title within the <Empty /> component. It can be utilized to emphasize text or provide a warning.
Empty.Description
The <Empty.Description /> explains why the <Empty /> component is displayed instead of data.
Empty.Actions
The <Empty.Actions /> offers the user one or multiple actions to resolve the lack of data. For instance, if there are too many filters on a table, a button can be added to remove those filters.
Full Example
Example Title Text
Example of Description Text.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
<Unknown className="flex w-full items-center justify-between gap-8">
<Unknown className="flex flex-col p-8 text-center h-full w-full items-center justify-center">
<Unknown className="flex h-28 w-28 justify-center items-center">
<Unknown className="relative z-10">
<Unknown className="absolute top-0 left-1/2 -translate-x-1/2 bg-gradient-to-r from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-32 h-[1px] " />
<Unknown className="absolute bottom-0 left-1/2 -translate-x-1/2 bg-gradient-to-r from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-32 h-[1px] " />
<Unknown className="absolute left-0 top-1/2 -translate-y-1/2 h-32 bg-gradient-to-t from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-[1px]" />
<Unknown className="absolute right-0 top-1/2 -translate-y-1/2 h-32 bg-gradient-to-t from-[hsla(240,100%,17%,0.01)] via-[hsla(240,100%,10%,0.06)] to-[hsla(240,100%,17%,0.01)] dark:from-[hsla(0,0%,0%,0)] dark:via-[hsla(211,66%,92%,0.3)] dark:to-[hsla(0,0%,0%,0)] w-[1px] " />
<Unknown className="flex w-16 h-16 items-center justify-center rounded-2xl bg-gray-2 border border-[1px] border-[hsla(240,100%,10%,0.06)] dark:border-[hsla(211,66%,92%,0.2)] text-accent-12 z-50 [&_svg]:pointer-events-none [&_svg]:size-7 [&_svg]:shrink-0">
<Unknown
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
>
<Unknown fill="currentColor">
<Unknown
cx="14.75"
cy="1.75"
fill="currentColor"
r=".75"
stroke="none"
/>
<Unknown
d="M3.869,1.894l-.947-.315-.315-.947c-.103-.306-.609-.306-.712,0l-.315,.947-.947,.315c-.153,.051-.256,.194-.256,.356s.104,.305,.256,.356l.947,.315,.315,.947c.051,.153,.194,.256,.356,.256s.305-.104,.356-.256l.315-.947,.947-.315c.153-.051,.256-.194,.256-.356s-.104-.305-.256-.356Z"
fill="currentColor"
stroke="none"
/>
<Unknown
d="M5.223,5.526c-.012-.115-.015-.216-.015-.334,0-1.887,1.53-3.417,3.417-3.417,1.575,0,2.901,1.066,3.297,2.516"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
/>
<Unknown
d="M6.865,8.894c-2.701,.164-4.701-.232-4.844-1.07-.187-1.094,2.861-2.527,6.808-3.201,3.947-.674,7.298-.334,7.485,.76,.151,.886-1.822,1.995-4.676,2.743"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
/>
<Unknown
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
x1="7.006"
x2="6"
y1="7.689"
y2="16.25"
/>
<Unknown
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
x1="11"
x2="16.25"
y1="7"
y2="16.25"
/>
<Unknown
cx="9.002"
cy="7.34"
fill="currentColor"
rx="2.026"
ry=".316"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1"
transform="translate(-1.13 1.66) rotate(-9.918)"
/>
</Unknown>
</Unknown>
</Unknown>
</Unknown>
</Unknown>
<Unknown className="text-accent-12 mt-3 font-semibold text-[15px] leading-6">
Example Title Text
</Unknown>
<Unknown className="text-accent-11 text-center text-xs font-normal leading-6 mt-1">
Example of Description Text.
</Unknown>
<Unknown className="w-full flex items-center justify-center gap-4 mt-2">
<Unknown>
<Unknown
height="18"
viewBox="0 0 18 18"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<Unknown fill="currentColor">
<Unknown
d="M2.75,14V4.25c0-1.105,.895-2,2-2H15.25V12.25"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<Unknown
d="M11,14H7v3.5c0,.202,.122,.385,.309,.462,.187,.079,.401,.035,.545-.108l1.146-1.146,1.146,1.146c.096,.096,.224,.146,.354,.146,.064,0,.13-.012,.191-.038,.187-.077,.309-.26,.309-.462v-3.5Z"
fill="currentColor"
stroke="none"
/>
<Unknown
d="M5.25,15.75h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5h-2.5"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.5"
/>
<Unknown
cx="5.75"
cy="9.75"
fill="currentColor"
r=".75"
stroke="none"
/>
<Unknown
cx="5.75"
cy="4.75"
fill="currentColor"
r=".75"
stroke="none"
/>
<Unknown
cx="5.75"
cy="7.25"
fill="currentColor"
r=".75"
stroke="none"
/>
</Unknown>
</Unknown>
<Unknown>
Submit
</Unknown>
</Unknown>
</Unknown>
</Unknown>
</Unknown>