Overview
Creates a <button> tag and is appropriate for triggering javascript
functions on-click. It can take on a number of visual styles, including both links and
buttons.
Related
- Buttons and links has an overview and usage guidance
KExternalLinkandKRouterLinkare similar but handle events differentlyKIconButtonhas a tooltip instead of a text labelKButtonGroupis used for button layoutKDropdownMenuand Buttons and links have more detail about adding a menu of options to a button component
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
text | Button label text | string |
null
| — |
appearance | Button appearance: 'raised-button', 'flat-button', or 'basic-link' | string |
'raised-button'
| — |
appearanceOverrides | Overrides that will modify the styles sent to $computedClass based on appearance prop | object |
{}
| — |
primary | Show as primary rather than secondary style
(for 'raised-button' and 'flat-button' appearance) | boolean |
false
| — |
disabled | Whether or not button is disabled | boolean |
false
| — |
type | HTML button type attribute (e.g. 'submit', 'reset') | string |
'button'
| — |
hasDropdown | Adds a dropdown arrow | boolean |
false
| — |
icon | If provided, prepends a KIcon to the text in the button | string |
null
| — |
iconAfter | If provided, appends an KIcon to the text in the button | string |
null
| — |
Events
| Name | Description |
|---|---|
click | Emitted when the button is triggered |
Slots
| Name | Description |
|---|---|
icon | — |
menu | Pass sub-components into the button, typically KDropdownMenu |
default | Slot alternative to the icon prop |
iconAfter | Slot alternative to the iconAfter prop |