Button

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

<k-button icon="check">Save</k-button>

Props

Prop	Type	Default	Description
autofocus	`boolean`	–
click	`func`	–	Pass instead of a link URL to be triggered on clicking the button
current	`string`\|`boolean`	–	Sets the `aria-current` attribute. Especially useful in connection with a `link` attribute.
disabled	`boolean`	–	A disabled button will have no pointer events and the opacity is be reduced.
icon	`string`	–	Adds an icon to the button.
id	`string`\|`number`	–
link	`string`	–	If the link attribute is set, the button will automatically be converted to a proper `a` tag.
rel	`string`	–
responsive	`boolean`	–	A responsive button will hide the button text on smaller screens automatically and only keep the icon. An icon must be set in this case.
role	`string`	–
tabindex	`string`	–
target	`string`	–	In connection with the `link` attribute, you can also set the target of the link. This does not apply to regular buttons.
text	`string`\|`number`	–	Use either the default slot or this prop for the button text
theme	`string` Supported values: positive, negative	–	With the theme you can control the general design of the button.
tooltip	`string`	–	The tooltip attribute can be used to add additional text to the button, which is shown on mouseover (with the `title` attribute).
type	`string` Supported values: button, submit, reset	"button"	The type attribute sets the button type like in HTML.

Slots

Slot	Description
default

Events

You can bind any typical button event to this component.

Examples

Text Button

<k-button>Save</k-button>

Text + Icon

<k-button icon="check">Save</k-button>

Icon only

<k-button icon="check" alt="Save" />

Themes

<k-button theme="positive">Save</k-button>
<k-button theme="negative">Delete</k-button>

CSS classes

.k-button