Badge
KBadge is a visual text label that presents small amount of information.
<KBadge appearance="success">Success</KBadge>Props
appearance
KBadge component takes one of the following appearance values:
| Standard | Methods |
|---|---|
info (default) | connect |
success | custom |
warning | delete |
danger | get |
decorative | head |
neutral | options |
patch | |
post | |
put | |
trace |
TIP
Passing one of the methods appearances will apply text-transform: uppercase and set the min-width on the badge container. You may pass custom to apply method badge styling should you need a badge for your custom method.
<KBadge appearance="info">Info</KBadge>
<KBadge appearance="success">Success</KBadge>
<KBadge appearance="warning">Warning</KBadge>
<KBadge appearance="danger">Danger</KBadge>
<KBadge appearance="decorative">Decorative</KBadge>
<KBadge appearance="neutral">Neutral</KBadge>
<KBadge appearance="connect">Connect</KBadge>
<KBadge appearance="custom">Custom</KBadge>
<KBadge appearance="delete">Delete</KBadge>
<KBadge appearance="get">Get</KBadge>
<KBadge appearance="head">Head</KBadge>
<KBadge appearance="options">Options</KBadge>
<KBadge appearance="patch">Patch</KBadge>
<KBadge appearance="post">Post</KBadge>
<KBadge appearance="put">Put</KBadge>
<KBadge appearance="trace">Trace</KBadge>tooltip
Provide a string of tooltip text that will be shown on badge hover.
<KBadge tooltip="Unpublish service to make changes" appearance="success">
Published
</KBadge>truncationTooltip
A boolean to conditionally display the tooltip only when the badge text is truncated. Defaults to false. See maxWidth prop to learn more about badge truncation.
<KBadge truncation-tooltip tooltip="8ba8840f-ded7-457a-adb9-0ef15b6fb919">
Id: 8ba8840f-ded7-457a-adb9-0ef15b6fb919
</KBadge>
<KBadge truncation-tooltip tooltip="null" appearance="neutral">
Last updated: null
</KBadge>maxWidth
A string, in pixels, to limit the badge width and truncate the text. Works just like max-width property in CSS. Default value is 200px. Text content that is wider than the provided value will be truncated.
<KBadge max-width="auto" appearance="warning">
Very long text that should be truncated but isn't thanks to max-width="auto"
</KBadge>iconBefore
The icon slot content is displayed before the badge text by default. Pass false to the iconBefore prop to render the icon after the badge text.
<KBadge :icon-before="false">
Badge with icon
<template #icon>
<KongIcon />
</template>
</KBadge>
<KBadge appearance="warning">
<template #icon>
<WarningOutlineIcon />
</template>
4
</KBadge>Slots
default
The badge content.
<KBadge appearance="success">Success</KBadge>icon
Used to pass an icon or (other element) into the badge. Positioning (whether this slot content is rendered before or after the badge content) is configured with the iconBefore prop.
<KBadge appearance="warning">
<template #icon>
<WarningOutlineIcon />
</template>
4
</KBadge>
<KBadge :icon-before="false">
Badge with icon
<template #icon>
<KongIcon />
</template>
</KBadge>TIP
To make an icon clickable, you must assign an attribute of role="button" and tabindex="0" attributes to the clickable element and bind an event handler. KBadge will take care of the state styling (hover, focus, and disabled).
<template>
<KBadge
appearance="warning"
:icon-before="false"
v-if="showBadge"
>
Dismiss me
<template #icon>
<CloseIcon
role="button"
tabindex="0"
@click="handleIconClick"
/>
</template>
</KBadge>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const showBadge = ref<boolean>(true)
const handleIconClick = () => {
showBadge.value = !showBadge.value
}
</script>KBadge takes care of icon color, size and spacing as long as you use icons sourced from @kong/icons package.
TIP
Should you decide to use your own custom icons, you can use design tokens exported by the @kong/design-tokens package to set icon size. The recommended icon size is 16px or kui-icon-size-30.
We also recommend setting the icon style color property to a value of currentColor to utilize default KBadge styling for slotted content.