Kongponents

# Badge

KBadge - Badges, pills, or whatever you wanna call them. Slap it on something.

SUCCESS
<KBadge appearance="success">SUCCESS</KBadge>

# Props

# appearance

The Badge component can take the following appearance values:

  • success
  • warning
  • danger
  • info
  • default
  • custom
SUCCESS
WARNING
DANGER
INFO
DEFAULT
<KBadge appearance="success">SUCCESS</KBadge>
<KBadge appearance="warning">WARNING</KBadge>
<KBadge appearance="danger">DANGER</KBadge>
<KBadge appearance="info">INFO</KBadge>
<KBadge>DEFAULT</KBadge>

# shape

The Badge has two shapes that can be changed with a shape property.

  • rounded - Default
  • rectangular
Round
Rectangular
<KBadge appearance="warning">Round</KBadge>
<KBadge appearance="warning" shape="rectangular">Rectangular</KBadge>

# color, background-color

Using the custom appearance in conjunction with color and background-color:

Custom
Badge
Hello
Something
Long Badge 236bfb09-fe79-4cc9-99be-9361d6b1db64 aa07575b-bcd3-4bb2-bfd7-998224e3d31e 364b78fc-dba3-4b94-9134-388515496de5
<KBadge color="var(--yellow-400)" background-color="var(--yellow-300)">Custom</KBadge>
<KBadge color="var(--red-100)" background-color="var(--red-400)">Badge</KBadge>
<KBadge color="var(--blue-200)" background-color="var(--blue-500)">Hello</KBadge>
<KBadge color="#dfe6e9" background-color="#636e72">Something</KBadge>
<KBadge color="var(--red-500)" background-color="var(--red-300)">Long Badge 236bfb09-fe79-4cc9-99be-9361d6b1db64 aa07575b-bcd3-4bb2-bfd7-998224e3d31e 364b78fc-dba3-4b94-9134-388515496de5</KBadge>

# Slots

  • default - innerHTML inside badge
<KBadge appearance="success">SUCCESS</KBadge>

# Theming

Variable Purpose
--KBadgeBorderRadius
--KBadgeFontSize
--KBadgeLineHeight
--KBadgeMinWidth
--KBadgeMaxWidth
--KBadgeWidth
--KBadgePaddingY Vertical top/bottom spacing
--KBadgePaddingX Horizontal left/right spacing
--KBadgeSuccessColor
--KBadgeSuccessBorder
--KBadgeSuccessBackground
--KBadgeWarningColor
--KBadgeWarningBorder
--KBadgeWarningBackground
--KBadgeInfoColor
--KBadgeInfoBorder
--KBadgeInfoBackground
--KBadgeDangerColor
--KBadgeDangerBorder
--KBadgeDangerBackground

An example of theming the danger badge:

Note: We are scoping the overrides to a wrapper in this example

DANGER - RADIOACTIVE MATERIAL
<template>
  <div class="KBadge-wrapper">
    <KBadge appearance="danger">DANGER - RADIOACTIVE MATERIAL</KBadge>
  </div>
</template>

<style>
.KBadge-wrapper {
  --KBadgeBorderRadius: 3px;
  --KBadgePaddingX: var(--spacing-xxs);
  --KBadgeDangerBackground: purple;
  --KBadgeDangerColor: lime;
  --KBadgeMaxWidth: auto;
}
</style>

← Breadcrumbs →