Buttons
Use the KButton component to allow users to trigger an action or event with a single click.
Button Variants & Sizes
Large
Medium(default)
Small
disabled
loading
Icon Buttons (iconOnly)
TypeScript
// Large Buttons KButton(size="large") default KButton(type="primary" size="large") primary KButton(type="danger" size="large") danger ... // Medium Buttons (Default) KButton() default KButton(type="primary") primary KButton(type="danger") danger ... // Small Buttons KButton(size="small") default KButton(type="primary" size="small") primary KButton(type="danger" size="small") danger ... // Disabled Buttons KButton(disabled) default KButton(type="primary" disabled) primary ... // Loading Buttons KButton(loading) default KButton(type="primary" loading) primary ...
Attributes
Configure the KButton component using these attributes.
| Name | Type | Default | Description |
|---|---|---|---|
| type | 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark' | 'default' | Button visual type |
| size | 'large' | 'medium' | 'small' | 'medium' | Button size |
| disabled | boolean | false | Disables the button |
| loading | boolean | false | Shows a loading state |
| iconOnly | boolean | false | Renders a square icon-only button without text margins |
| href | string | undefined | Render as a link instead of a button |
Events
Listen to these events emitted by the KButton component.
| Name | Payload | Description |
|---|---|---|
| click | [] | Fired when the button is clicked |
Slots
Customize the content of KButton using these slots.
| Name | Description |
|---|---|
| default | Button content |