button

button styles

button sizes

tooltip

icon

loading

error

template

<bunt-button id="btn-none">default</bunt-button>
<bunt-button id="btn-primary">color</bunt-button>
<bunt-button id="btn-clear">clear</bunt-button>
<bunt-button id="btn-text-color">text color</bunt-button>
<bunt-button id="btn-disabled" :disabled="true">disabled</bunt-button>

<bunt-button id="btn-none">normal</bunt-button>
<bunt-button id="btn-large">large</bunt-button>
<bunt-button id="btn-huge">huge</bunt-button>

<bunt-button id="btn-tooltip" tooltip="hoorrraaaa">tooltip</bunt-button>
<bunt-button id="btn-tooltip" tooltip="hoorrraaaa" tooltip-placement="right">tooltip right</bunt-button>

<bunt-button id="btn-icon" icon="add">icon</bunt-button>

<bunt-button id="btn-loading" :loading="true">a longish text</bunt-button>

<bunt-button id="btn-error" :error="true">a longish text</bunt-button>
<bunt-button id="btn-error" error-message="something went wrong">a longish text</bunt-button>

style

#btn-none, #btn-tooltip, #btn-icon
	button-style()
#btn-primary, #btn-disabled, #btn-loading, #btn-error
	button-style(color: $clr-primary)
#btn-clear
	button-style(color: $clr-primary, style: 'clear')
#btn-text-color
	button-style(color: $clr-danger, text-color: $clr-warning)
#btn-large
	button-style(size: 'large')
#btn-huge
	button-style(size: 'huge')

props

prop type required default description
type string false 'button' native button type
disabled boolean false false disables button (renders as disabled and does not emit click, other events and native events are unaffected)
icon string false mdi icon name to display
tooltip string false tooltip text
tooltip-placement string false 'bottom' tooltip placement, see v-tooltip directive documentation
tooltip-fixed boolean false false position tooltip fixed, see v-tooltip directive documentation
loading boolean false false show loading indicator and disable button
error boolean false false render the button error state
errorMessage string false render the button error state and show a message as open tooltip
text string false button text (recommended: use slot instead)

slots

slot description
default button text

events

event args description
click null

style mixin parameters

parameter type default description
style 'flat', 'clear' 'flat' button style
color color background-color if flat style, text color if clear style
text-color color automagic text-color is automatically chosen depending on lightness of color
size 'normal', 'large', 'huge' 'normal' button size