Button
The Button component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
info
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| absolute | Applies position: position relative to the component. | boolean | false |
| activeClass | Configure the active CSS class applied. | string | |
| appendIcon | Icon can be added. | boolean | false |
| block | Expands the button to 100% of available space. | boolean | false |
| class | Prop that determines the class to add to the Button. | string | undefined |
| depressed | Removes the button box shadow. | boolean | false |
| disabled | Removes the ability to click or target the component. | boolean | false |
| fab | button will become round. | boolean | false |
| fixed | Applies position: fixed to the component. | boolean | false |
| href | Designates the component as anchor and applies the href attribute. | string | object | undefined |
| icon | Designates the button as icon. Button will become round and applies the text prop. | boolean | false |
| inputValue | Controls the button’s active state. | any | undefined |
| link | Designates that the component is a link. This is automatic when using the href or to prop. | boolean | false |
| loading | Adds a loading icon animation. | boolean | false |
| prependInnerIcon | Prepends an icon inside the component’s input, uses the same syntax as v-icon. | string | undefined |
| retainFocusOnClick | Don’t blur on click. | boolean | false |
| replace | Prop that determines the class to add to the Button. | boolean | false |
| right | Aligns the component towards the right. | boolean | false |
| ripple | Applies the 'v-ripple' directive. | boolean | object | undefined |
| tag | Specify a custom tag used on the root element. | string | 'button' |
| text | Makes the background transparent. When using the color prop, the color will be applied to the button text instead of the background. | boolean | false |
| to | Denotes the target route of the link. | string | object | undefined |
| type | Set the button’s type attribute. | string | 'button' |
| tabIndex | It determines the order of switching from one component to another with the tab key. | string | |
| visible | Visibility of Button component. | boolean | true |
Events
| Attribute | Description |
|---|---|
| click | Trigger when you click marker on the button |
| mouseover | Trigger when mouse over the button |
| mouseleave | Trigger when mouse leave the button |
Samples Component
