KStatusBadge

示例

Variants

OnlinePendingFailedDraftInfo

A colored status indicator badge with an optional pulsing dot and label.

Props

Name	Type	Default	Description
label	string	—	Text displayed next to the status dot.
variant	'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'purple' | 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'red' | 'teal' | 'violet' | 'yellow'	'neutral'	Color variant for the badge.
pulse	boolean	false	Whether the dot should pulse animate.
showDot	boolean	true	Whether to show the colored dot indicator.
copyable	boolean	false	Whether clicking the badge copies the label text.
autoColor	string	—	A string used to auto-determine the color variant via hashing. Overrides variant when provided.
size	'sm' | 'md' | 'lg'	'md'	Badge size.

Emits

Name	Parameters	Description
—	—	This component does not emit custom events.

Slots

Name	Description
—	This component does not provide slots.

Basic Usage

<script setup>
import { KStatusBadge } from '@kK-2004/ui-component'
</script>

<template>
  <KStatusBadge label="Active" variant="success" />
</template>