Overview
Use KIconButton in situations where larger buttons with visible text would hinder the user experience. Use the flat secondary style unless the action should be highlighted.
A tooltip with the name of the action is required for an icon button.
Related
- Buttons and links has an overview and usage guidance
KButton,KExternalLink, andKRouterLinkare all similar but handle events differentlyKButtonGroupis 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 |
|---|---|---|---|---|
icon | Name of icon to display | string | — | true |
appearance | Button appearance: 'raised-button' or 'flat-button' | string |
'flat-button'
| — |
color | Optional hex or rgb[a] color for the button background | string |
null
| — |
disabled | Whether or not button is disabled | boolean |
false
| — |
buttonType | HTML button type attribute (e.g. 'submit', 'reset') | string |
'button'
| — |
size | Button size: 'mini', 'small', 'regular', or 'large' | string |
'regular'
| — |
ariaLabel | aria-label attribute | string |
null
| — |
tooltip | Tooltip label | string |
null
| — |
tooltipPosition | Tooltip position: 'top', 'right', 'bottom', 'left' | string |
'bottom'
| — |
Slots
| Name | Description |
|---|---|
menu | Pass sub-components into the button, typically KDropdownMenu |