var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var E=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),f=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},s=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of y(t))!S.call(e,a)&&a!==o&&r(e,a,{get:()=>t[a],enumerable:!(i=d(t,a))||i.enumerable});return e};var g=(e,t,o)=>(o=e!=null?l(h(e)):{},s(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),x=e=>s(r({},"__esModule",{value:!0}),e);var m=E((w,c)=>{c.exports=_jsx_runtime});var b={};f(b,{default:()=>u,frontmatter:()=>B});var n=g(m()),B={id:"empty-state",title:"EmptyState",package:"@saas-ui/core",description:"Display actionable feedback when no data is available."};function p(e){let t={code:"code",h2:"h2",h3:"h3",p:"p",pre:"pre",...e.components},{ComponentLinks:o}=t;return o||C("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(t.p,{children:[(0,n.jsx)(t.code,{children:"EmptyState"})," is used when there is no data available in a list, table, or other data visualizations."]}),` `,(0,n.jsx)(o,{theme:{componentName:"empty-state"},github:{url:"https://github.com/saas-ui/saas-ui/blob/main/packages/saas-ui-core/src/empty-state"},npm:{package:"@saas-ui/core"}}),` `,(0,n.jsx)(t.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-js",children:`import { EmptyState } from '@saas-ui/react' `})}),` `,(0,n.jsx)(t.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(t.h3,{id:"basic-emptystate",children:"Basic EmptyState"}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:`import { Button } from '@chakra-ui/react' import { EmptyState } from '@saas-ui/react' import { FiUsers } from 'react-icons/fi' export default function NoCustomers() { return ( } /> ) } `})}),` `,(0,n.jsx)(t.h3,{id:"composition",children:"Composition"}),` `,(0,n.jsx)(t.p,{children:"In case you want more control you can compose your own EmptyState component."}),` `,(0,n.jsx)(t.pre,{children:(0,n.jsx)(t.code,{className:"language-jsx",children:`import { Button } from '@chakra-ui/react' import { EmptyStateContainer, EmptyStateBody, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, } from '@saas-ui/react' import { FiAlertCircle } from 'react-icons/fi' export default function CustomEmptyState() { return ( Whoops, something went wrong Where do you want to go? ) } `})})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(p,{...e})}):p(e)}function C(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(b);})(); ;return Component;

EmptyState

Import#

Usage#

Basic EmptyState#

Composition#