Badge

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

Success

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

Info

Success

Warning

Danger

Decorative

Neutral

Connect

Custom

Delete

Get

Head

Options

Patch

Post

Put

Trace

<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

Unpublish service to make changes

<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

<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"

<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

<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

<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

<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

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