Skip to content

Kirby 3.7.5

Button

<k-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