KongponentsEmptyState
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 cta-text="CTA button">
<template v-slot:title>EmptyState Title</template>
<template v-slot:message>EmptyState Message</template>
</KEmptyState>Props
ctaIsHidden
Boolean value used to hide the call to action button.
<KEmptyState cta-is-hidden>
<template v-slot:title>No content</template>
<template v-slot:message>You do not have any content here 😉️</template>
</KEmptyState>You can also use this to move your call to action into the message text.
<KEmptyState cta-is-hidden>
<template v-slot:title>No services</template>
<template v-slot:message><router-link>Add a service</router-link> to begin proxying traffic</template>
</KEmptyState>ctaText
A string to be used as the text content of the call to action button.
<KEmptyState cta-text="Button text">
<template v-slot:title>No Content</template>
<template v-slot:message>You do not have any content here 😉️</template>
</KEmptyState>handleClick
A function that is passed as the click handler for the call to action button
<KEmptyState cta-text="Click me!" :handle-click="clickFunction">
<template v-slot:title>No content</template>
<template v-slot:message>You do not have any content here 😉️</template>
</KEmptyState>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const clickFunction = (): void => {
alert('you clicked me!')
}
return {
clickFunction,
}
},
})
</script>isError
A flag denoting whether or not the message is an error message. If so, a warning icon is displayed above the title slot. Keep in mind that cta-is-hidden should also be set to true if you do not want a button to render in the error state.
<KEmptyState :cta-is-hidden="true" :is-error="true">
<template v-slot:message>
<h3>
Error: Something broke
</h3>
</template>
</KEmptyState>icon
A string for the KIcon name to be displayed directly above the title. Specifying a value for icon will automatically indicate that it should be visible.
<KEmptyState :cta-is-hidden="true" icon="support">
<template v-slot:message>
<h3>
Call me!
</h3>
</template>
</KEmptyState>iconSize
A number denoting the size of the icon to be displayed above the empty state message. The default size is 50.
<KEmptyState :cta-is-hidden="true" :is-error="true" icon-size="40">
<template v-slot:message>
<h3>
Error: Something broke and now this size 40 warning icon is displayed.
</h3>
</template>
</KEmptyState>iconColor
A string denoting the color of the icon to be displayed above the empty state message.
<KEmptyState :cta-is-hidden="true" :is-error="true" icon-size="40" icon-color="#5996ff">
<template v-slot:title>No users exist</template>
<template v-slot:message>
Adding new users will populate this table.
</template>
<template v-slot:cta>
<KButton appearance="primary">Add a user</KButton>
</template>
</KEmptyState>iconSecondaryColor
A string denoting the secondary color of the icon to be displayed above the empty state message.
<KEmptyState cta-is-hidden icon="warning" icon-color="#0b172d" icon-secondary-color="#ffd68c">
<template #title>No users exist</template>
<template #message>
Adding new users will populate this table.
</template>
</KEmptyState>Slots
KEmptyState has 3 named slots used, title, message, and cta. You can use the props outlined about to control the text and click handler of the button or hide it altogether. You can also use the cta slot to pass anything you want!
<KEmptyState icon="kong">
<template v-slot:cta>
<template v-slot:title>Look mah!</template>
<template v-slot:message>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec justo libero. Nullam accumsan quis ipsum vitae tempus. Integer non pharetra orci. Suspendisse potenti.</template>
<KButton appearance="danger" size="small">Danger button</KButton>
</template>
</KEmptyState>Theming
| Variable | Purpose |
|---|---|
--KEmptyTitleColor | Replaces title text color |
--KEmptyContentColor | Replaces content text color |
--KEmptyBackground | Replaces background color of the empty state |
An Example of what using theming might look like.
<div class="custom-empty-state">
<KEmptyState cta-text="CTA button">
<template v-slot:title>EmptyState Title</template>
<template v-slot:message>EmptyState Message</template>
</KEmptyState>
</div>
<style scoped lang="scss">
.custom-empty-state {
--KEmptyTitleColor: #556B2F;
--KEmptyContentColor: #C71585;
--KEmptyBackground: #FFF0F5;
}
</style>