Empty

component

What a list shows when it has nothing: a picture, a title, a sentence, and what to do.

Preview

Light

No event yet

The next ones will be listed here.

Code

<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Title>No event yet</twig:Empty:Title>
        <twig:Empty:Description>The next ones will be listed here.</twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content><twig:Button>Add an event</twig:Button></twig:Empty:Content>
</twig:Empty>

Dark

No event yet

The next ones will be listed here.

Code

<twig:Empty>
    <twig:Empty:Header>
        <twig:Empty:Title>No event yet</twig:Empty:Title>
        <twig:Empty:Description>The next ones will be listed here.</twig:Empty:Description>
    </twig:Empty:Header>
    <twig:Empty:Content><twig:Button>Add an event</twig:Button></twig:Empty:Content>
</twig:Empty>

Installation

php bin/console ux:install empty --kit=github.com/parler-haut-interagir-librement/ux-kit

Files to copy

templates/components/Empty.html.twig

<div data-slot="empty"{{ attributes.defaults({class: 'isEmptyState'}) }}>
{##- The empty state content, typically includes `Empty:Media`, `Empty:Header`, and/or `Empty:Content`. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Empty/Content.html.twig

<div data-slot="empty-content"{{ attributes.defaults({class: 'isEmptyContent'}) }}>
{##- The main content area, typically contains actions like buttons. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Empty/Description.html.twig

<p data-slot="empty-description"{{ attributes.defaults({class: 'isEmptyDescription'}) }}>
{##- The descriptive text explaining the empty state. -#}
{%- block content %}{% endblock -%}
</p>

templates/components/Empty/Header.html.twig

<header data-slot="empty-header"{{ attributes.defaults({class: 'isEmptyHeader'}) }}>
{##- The header area, typically contains `Empty:Title` and `Empty:Description`. -#}
{%- block content %}{% endblock -%}
</header>

templates/components/Empty/Media.html.twig

{%- props
    ## 'default'|'icon' The media display style.
    variant = 'default'
-%}
<div data-slot="empty-icon" data-variant="{{ variant }}"{{ attributes.defaults({class: 'isEmptyMedia'}) }}>
{##- The visual element, typically an icon or illustration. -#}
{%- block content %}{% endblock -%}
</div>

templates/components/Empty/Title.html.twig

<p data-slot="empty-title"{{ attributes.defaults({class: 'isEmptyTitle'}) }}><strong>
{##- The title text of the empty state. -#}
{%- block content %}{% endblock -%}
</strong></p>