Skip to content

Badge

KBadge is a visual text label that presents small amount of information.

Success
html
<KBadge appearance="success">Success</KBadge>

Props

appearance

KBadge component takes one of the following appearance values:

StandardMethods
info (default)connect
successcustom
warningdelete
dangerget
decorativehead
neutraloptions
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.

Info
Success
Warning
Danger
Decorative
Neutral
Connect
Custom
Delete
Get
Head
Options
Patch
Post
Put
Trace
html
<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.

Published
html
<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.

Id: 8ba8840f-ded7-457a-adb9-0ef15b6fb919
Last updated: null
html
<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.

Very long text that should be truncated but isn't thanks to max-width="auto"
html
<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.

Badge with icon
4
html
<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.

Success
html
<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.

4
Badge with icon
html
<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).

Dismiss me
vue
<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.

Released under the Apache-2.0 License.