components
Empty State
v.1.0.0 | Saturn
StorybookDisplay to inform the users when there is no data provided.
import { EmptyState } from '@kubit-ui-web/react-components'
1
<EmptyState variant="DEFAULT" state="DEFAULT" subtitle={{ content: 'Subtitle' }}>Empty</EmptyState>
Variant
In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.
We have set this predefined style for quick use. Access them through the variant prop.
As the variant, state is a general prop por further customization of the component. We have set a default prop for its quick use.
123456
<EmptyState
variant="DEFAULT"
state="DEFAULT"
title={{ content: 'Title' }}
subtitle={{ content: 'Subtitle' }}
/>Icon
You can enhance the component by adding an icon using the icon prop.
12345678
<EmptyState
variant="DEFAULT"
state="DEFAULT"
title={{ content: 'Title' }}
subtitle={{ content: 'Subtitle' }}
icon={{ icon: 'ICON_GHOST' }}
button={{ variant: 'PRIMARY', content: 'Button' }}
/>