Components

Empty State

A component to utilize when there is no content to display in a particular section or view of the page.

Usage

The Empty State component serves to inform the user that the section is empty, provide guidance on what actions can be taken to populate the content, or suggest next steps.

No data to display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh.

::empty-state
---
title: "No data to display"
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
---
::

EmptyState Component Props

title

Empty state title text.

description

Empty state description text.

Props

title

Empty state title text.

Type: string
Required: true

No data to display

::empty-state
---
title: "No data to display"
---
::

description

Empty state description text.

Type: string
Default: ''

No data to display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh.

::empty-state
---
title: "No data to display"
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
---
::

Shared Props

This component also includes the shared props listed below:

styles - default is ''.

See here for more information on shared props.

Slots

action

Use the #action slot to add a call-to-action button to the Empty State component.

No data to display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh.

::empty-state
---
title: "No data to display"
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
---
#action
::k-button
  Refresh
::
::

default

Use the #default slot to add custom content below the title and description.

No data to display

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.

::empty-state
---
title: "No data to display"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque elit, tristique placerat feugiat ac, facilisis vitae arcu. Proin eget egestas augue. Praesent ut sem nec arcu pellentesque aliquet. Duis dapibus diam vel metus tempus vulputate.
::

icon

Icon support is coming soon. Please refrain from utilizing this slot at this time.

Use the #icon slot to display an icon above the title.

☺

No data to display

::empty-state
---
title: "No data to display"
---
#icon
&#9786;
::