KButton
示例
Variants
Sizes
States
Native Button Types
Button component with variant, size, disabled, and loading states.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link' | 'default' | Visual style variant of the button. |
| size | 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | 'default' | Size of the button. Use icon* sizes for icon-only buttons. |
| disabled | boolean | false | Whether the button is disabled. |
| loading | boolean | false | Whether the button is in a loading state. Shows a spinner and disables interaction. |
| type | 'button' | 'submit' | 'reset' | 'button' | Native HTML button type attribute. |
| theme | 'auto' | 'day' | 'night' | 'auto' | Theme mode. auto follows the current theme; day and night force a specific mode. |
Emits
| Name | Parameters | Description |
|---|---|---|
| click | (event: MouseEvent) | Emitted when the button is clicked (not emitted when disabled or loading). |
Slots
| Name | Description |
|---|---|
| default | Button label or content. |
Basic Usage
vue
<script setup>
import { KButton } from '@kK-2004/ui-component'
</script>
<template>
<KButton variant="default" size="default">
Click me
</KButton>
</template>