Button
All in one button component. Configurable as a text button, icon button or link button taking vue-router props.
Playground
<bunt-button
:disabled
=""icon
=""tooltip
="":loading
="":error
=""errorMessage
="":to
="">
</bunt-button>
--button-shape
:
--button-weight
:
--button-color
:
--button-color-error
:
--button-color-success
:
--button-text-color
:
--button-size
:
--tooltip-placement
:
API
Slots
| Slot | Description |
|---|---|
| default | Button text. Leave empty to render icon button. |
| icon | Use this slot if you want to display a custom icon. For MDI icons, use the `icon` prop instead. |
Props
| Property | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | false | |
| icon | string | MDI iconset name. To render just an icon button, leave default slot empty. | |
| tooltip | string | ||
| loading | boolean | false | |
| error | boolean | false | |
| errorMessage | string | ||
| to | [ "string", "object" ] | vue-router's router-link location. If set, renders a router-link component instead of a button element. |
Events
| Event | Description |
|---|---|
| click |
Style
| Property | Type | Default | Description |
|---|---|---|---|
| --button-shape | pill, rounded, squared | pill | |
| --button-weight | filled, outlined, text | filled | |
| --button-color | color | var(--clr-primary) | |
| --button-color-error | color | var(--clr-danger) | |
| --button-color-success | color | var(--clr-success) | |
| --button-text-color | color | computed | Either --clr-primary-text-light or --clr-primary-text-dark, whichever has better contrast with --button-color |
| --button-size | small, normal, large, huge | normal | |
| --tooltip-placement | auto, top, right, bottom, left | auto | Supports `-start` and `-end` suffix. |
Examples
Shape
<bunt-button
>
default
</bunt-button>
--button-shape
:
pill
<bunt-button
>
rounded
</bunt-button>
--button-shape
:
rounded
<bunt-button
>
squared
</bunt-button>
--button-shape
:
squared
Weight
<bunt-button
>
filled
</bunt-button>
--button-weight
:
filled
<bunt-button
>
outlined
</bunt-button>
--button-weight
:
outlined
<bunt-button
>
text
</bunt-button>
--button-weight
:
text
Size
<bunt-button
>
small
</bunt-button>
--button-size
:
small
<bunt-button
>
normal
</bunt-button>
--button-size
:
normal
<bunt-button
>
large
</bunt-button>
--button-size
:
large
<bunt-button
>
huge
</bunt-button>
--button-size
:
huge
Custom Color
<bunt-button
>
color
</bunt-button>
--button-color
:
var(--clr-orange)
<bunt-button
>
color
</bunt-button>
--button-color
:
var(--clr-yellow)
--button-text-color
:
var(--clr-red)
Icon
<bunt-button
icon
="plus
">
with icon
</bunt-button>
<bunt-button
icon
="space-invaders
">
</bunt-button>
<bunt-button
icon
="space-invaders
">
</bunt-button>
--button-shape
:
rounded
<bunt-button
icon
="space-invaders
">
</bunt-button>
--button-shape
:
squared
<bunt-button
icon
="space-invaders
">
</bunt-button>
--button-weight
:
outlined
<bunt-button
icon
="space-invaders
">
</bunt-button>
--button-weight
:
text
Tooltip
<bunt-button
tooltip
="a tooltip!
">
hover me!
</bunt-button>
--tooltip-placement
:
left
States
<bunt-button
:disabled
="true
">
disabled
</bunt-button>
<bunt-button
:loading
="true
">
loading loading
</bunt-button>
<bunt-button
:error
="true
">
error
</bunt-button>
<bunt-button
errorMessage
="something went wrong!
">
error message
</bunt-button>
<bunt-button
to
="/some-path
">
router-link
</bunt-button>