Empty

An empty state: a list with no items yet, a search with no results.

<twig:Tabler:Empty title="No results found" subtitle="Try adjusting your search or filters." />

<div class="empty">
    <p class="empty-title">No results found</p>
    <p class="empty-subtitle text-secondary">Try adjusting your search or filters.</p>
</div>

Icon and action

The icon and action blocks have no matching prop: fill them with Empty:Icon and Empty:Action, while the title and the subtitle keep coming from the props. See blocks.

Empty:Icon is a 3rem box sized for an SVG: give a webfont icon a matching font-size.

<twig:Tabler:Empty title="No invoices yet" subtitle="Invoices you create show up here.">
    <twig:block name="icon">
        <twig:Tabler:Empty:Icon><twig:Tabler:Icon name="file-invoice" style="font-size: 3rem" /></twig:Tabler:Empty:Icon>
    </twig:block>
    <twig:block name="action">
        <twig:Tabler:Empty:Action>
            <twig:Tabler:Button variant="primary"><twig:Tabler:Icon name="plus" class="icon" /> New invoice</twig:Tabler:Button>
        </twig:Tabler:Empty:Action>
    </twig:block>
</twig:Tabler:Empty>

<div class="empty">
    <div class="empty-icon"><i class="ti ti-file-invoice" style="font-size: 3rem"></i></div>
    <p class="empty-title">No invoices yet</p>
    <p class="empty-subtitle text-secondary">Invoices you create show up here.</p>
    <div class="empty-action">
        <button type="button" class="btn btn-primary">
            <i class="ti ti-plus icon"></i>
            New invoice
        </button>
    </div>
</div>

Header and image

Instead of an icon, lead with a large text in Empty:Header, such as an error code:

<twig:Tabler:Empty title="Page not found" subtitle="The page you are looking for was moved or deleted.">
    <twig:block name="icon">
        <twig:Tabler:Empty:Header>404</twig:Tabler:Empty:Header>
    </twig:block>
    <twig:block name="action">
        <twig:Tabler:Empty:Action>
            <twig:Tabler:Button variant="primary" href="/dashboard"><twig:Tabler:Icon name="arrow-left" class="icon" /> Back to the dashboard</twig:Tabler:Button>
        </twig:Tabler:Empty:Action>
    </twig:block>
</twig:Tabler:Empty>

<div class="empty">
    <div class="empty-header">404</div>
    <p class="empty-title">Page not found</p>
    <p class="empty-subtitle text-secondary">The page you are looking for was moved or deleted.</p>
    <div class="empty-action">
        <a href="/dashboard" class="btn btn-primary" role="button">
            <i class="ti ti-arrow-left icon"></i>
            Back to the dashboard
        </a>
    </div>
</div>

Or with an illustration in Empty:Img. bordered draws a border around the empty state:

<twig:Tabler:Empty bordered="{{ true }}" title="No projects yet" subtitle="Create a project to start tracking time and expenses.">
    <twig:block name="icon">
        <twig:Tabler:Empty:Img><img src="/examples/photo-1.jpg" height="128" alt=""></twig:Tabler:Empty:Img>
    </twig:block>
    <twig:block name="action">
        <twig:Tabler:Empty:Action>
            <twig:Tabler:Button variant="primary"><twig:Tabler:Icon name="plus" class="icon" /> New project</twig:Tabler:Button>
        </twig:Tabler:Empty:Action>
    </twig:block>
</twig:Tabler:Empty>

<div class="empty empty-bordered">
    <div class="empty-img"><img src="/examples/photo-1.jpg" height="128" alt="" /></div>
    <p class="empty-title">No projects yet</p>
    <p class="empty-subtitle text-secondary">Create a project to start tracking time and expenses.</p>
    <div class="empty-action">
        <button type="button" class="btn btn-primary">
            <i class="ti ti-plus icon"></i>
            New project
        </button>
    </div>
</div>

Composed

Children replace the whole content, for rich text in the subtitle:

<twig:Tabler:Empty>
    <twig:Tabler:Empty:Icon><twig:Tabler:Icon name="users" style="font-size: 3rem" /></twig:Tabler:Empty:Icon>
    <twig:Tabler:Empty:Title>No team members</twig:Tabler:Empty:Title>
    <twig:Tabler:Empty:Subtitle>
        Invite people to <strong>Acme Corp</strong> to share projects and invoices.
    </twig:Tabler:Empty:Subtitle>
    <twig:Tabler:Empty:Action>
        <twig:Tabler:Button variant="primary"><twig:Tabler:Icon name="user-plus" class="icon" /> Invite members</twig:Tabler:Button>
    </twig:Tabler:Empty:Action>
</twig:Tabler:Empty>

<div class="empty">
    <div class="empty-icon"><i class="ti ti-users" style="font-size: 3rem"></i></div>
    <p class="empty-title">No team members</p>
    <p class="empty-subtitle text-secondary">
        Invite people to
        <strong>Acme Corp</strong>
        to share projects and invoices.
    </p>
    <div class="empty-action">
        <button type="button" class="btn btn-primary">
            <i class="ti ti-user-plus icon"></i>
            Invite members
        </button>
    </div>
</div>

Props

Prop	Type	Default	Description
`title`	string?	`null`	Rendered with `Empty:Title`
`subtitle`	string?	`null`	Rendered with `Empty:Subtitle`
`bordered`	bool	`false`	Border around the empty state (`empty-bordered`)

Other attributes go to the root <div class="empty">.

Sub-components

Component	Renders
`Empty:Icon`	`<div class="empty-icon">`: put any icon inside (Tabler Icons, SVG, ux-icons)
`Empty:Header`	`<div class="empty-header">`: a large text, such as an error code
`Empty:Img`	`<div class="empty-img">`: put an illustration inside
`Empty:Title`	`<p class="empty-title">`
`Empty:Subtitle`	`<p class="empty-subtitle text-secondary">`
`Empty:Action`	`<div class="empty-action">`: buttons or links

Blocks

Block	Default
`icon`	Nothing: put an `Empty:Icon`, `Empty:Header` or `Empty:Img` in it
`title`	`Empty:Title` with the `title` prop, when set
`subtitle`	`Empty:Subtitle` with the `subtitle` prop, when set
`action`	Nothing: put an `Empty:Action` in it
`content`	`icon`, `title`, `subtitle` and `action`: replace it to compose freely