EmptyState
KEmptyState is used as a placeholder card when the primary content is not available or empty. It can also optionally be used as an error state.
<KEmptyState
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Content"
/>Props
title
String to display as title.
<KEmptyState
title="Empty State Title"
action-button-text="Action"
/>message
Text under the title. Ideal for providing a detailed explanation to the user on why they are seeing this screen. Can also be slotted.
<KEmptyState
message="Lorem ipsum dolor sit amet..."
title="Empty State Content"
/>actionButtonText
Button text under the message.
NOTE
The button won't be rendered if this prop is not provided.
<KEmptyState
action-button-text="Refresh"
title="Empty State Action Button"
message="Lorem ipsum dolor sit amet..."
/>actionButtonVisible
Boolean to show/hide action button. Defaults to true.
<KEmptyState
:action-button-visible="false"
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Action Button"
/>actionButtonDisabled
Boolean to control whether action button should be enabled or disabled. Defaults to false.
<KEmptyState
action-button-disabled
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Action Button"
/>iconVariant
Depending on context in which you need to display empty state message component to the user, you may want it to have different appearances. iconVariant prop provides a few options to easily swap the icon to better fit the context in which the component is displayed. Should you want to use your custom icon, you can use the icon slot.
Accepted values:
default(default)errorsearchkong
<KEmptyState
icon-variant="error"
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Error"
/><KEmptyState
icon-variant="search"
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Search"
/>iconBackground
When set to true, the icon is rendered in a rectangular container with a decorative background. Default value is false.
<KEmptyState
icon-background
icon-variant="kong"
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Decorative Icon"
/>features
If provided, will display card for each feature below the action button, along with an icon slot, a title and a short description. You can also use feature-icon slot to display an icon in each feature card. Expects an array of objects of type EmptyStateFeature:
interface EmptyStateFeature {
/** Used in feature icon slot name, needs to be unique for each feature */
key?: string
title: string
description: string
}<KEmptyState
:features="[
{
key: 'wave',
title: 'Feature 1',
description: 'Description for feature 0.',
},
{
key: 'sparkles',
title: 'Feature with a very long title that exceeds the usual length',
description: 'Lorem ipsum dolor sit amet...',
},
{
key: 'rocket',
title: 'Feature 3',
description: 'Description for feature 2.',
},
{
key: 'design',
title: 'Feature 4',
description: 'Description for feature 3.',
},
]"
message="Lorem ipsum dolor sit amet..."
title="Empty State With Features"
/>Slots
default
Slot for passing message content. When provided, takes precedence over the message prop.
<KEmptyState
action-button-text="Action"
message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
title="Empty State Slotted Content"
>
Lorem ipsum dolor sit amet... <KExternalLink href="https://kongponents.konghq.com/">Learn more</KExternalLink>
</KEmptyState>title
Slot for passing title text.
<KEmptyState
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Lorem Ipsum Dolor Sit Amet"
>
<template #title>
<h1>Empty State Slotted Title</h1>
</template>
</KEmptyState>icon
Slot for providing custom icon.
<KEmptyState
action-button-text="Action"
message="Lorem ipsum dolor sit amet.."
title="Empty State Slotted Icon"
>
<template #icon>
<KongIcon />
</template>
</KEmptyState>image
Instead of an icon, you can provide a custom image through the image slot.
<KEmptyState
message="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh."
title="Empty State With Image"
>
<template #image>
<img src="https://picsum.photos/640/300">
</template>
</KEmptyState>NOTE
Please note that content passed through image slot takes presedence over KEmptyState icon, which means values passed through iconVariant and iconBackground props and content passed through icon slot will be ignored.
action
Slot for providing your custom action button.
<KEmptyState
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Slotted Action Button"
>
<template #action>
<KButton>
<AddCircleIcon />
Create New
</KButton>
</template>
</KEmptyState>feature-icon
For each feature provided through the features prop, you can pass a custom icon through the feature-icon-key slot where key is the value of the key property in the corrsponding feature object.
<KEmptyState
:features="features"
message="Lorem ipsum dolor sit amet..."
title="Empty State With Features"
>
<template #feature-icon-wave>
<WavingHandIcon />
</template>
<template #feature-icon-sparkles>
<SparklesIcon />
</template>
<template #feature-icon-rocket>
<RocketIcon />
</template>
<template #feature-icon-design>
<DesignIcon />
</template>
</KEmptyState>footer
Content to be displayed at the bottom of the empty state component, separated by a divider line.
<KEmptyState
message="Lorem ipsum dolor sit amet..."
title="Empty State With Footer Content"
>
<template #footer>
<div>
<span>
Get started with the CLI
</span>
<KExternalLink ...>
Read the docs
</KExternalLink>
</div>
<KCodeBlock
...
/>
</template>
</KEmptyState>Events
click-action
Emitted when action button is clicked.
<template>
<KEmptyState
@click-action="onActionClick"
action-button-text="Action"
message="Lorem ipsum dolor sit amet..."
title="Empty State Events"
/>
</template>
<script setup lang="ts">
const onActionClick = (): void => {
alert('Action button clicked!')
}
</script>