Empty state
Empty states occur when a component or a page has no content or data to show. As opposed to leaving the component or page empty, an empty state can help clarify the status and can provide guidance to help users with the next steps.
Page empty state
Page empty states in Leviy applications are displayed on pages where there is no content. Once content is created the page setup may be displayed in a different way, for instance in a table might appear and the call to action button may move to the top right of the page.
Generate one to setup an integration
{% import '@leviy-components/empty_state/empty_state.html.twig' as empty_state %}
{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}
{% set action_button = buttons.button('Generate API key', 'primary') %}
{{ empty_state.page_empty_state('There are no API keys', 'Generate one to setup an integration', action_button) }}The action text and action button are optional:
{% import '@leviy-components/empty_state/empty_state.html.twig' as empty_state %}
{{ empty_state.page_empty_state('There are no API keys') }}Element empty state
Element empty states are only used on pages containing multiple information blocks, where a full page empty state will take up too much space.
cloud_queue
There are no due audits
{% import '@leviy-components/empty_state/empty_state.html.twig' as empty_state %}
{{ empty_state.element_empty_state('There are no due audits') }}