Nuxt Buttons
Use Nuxt buttons and Nuxt custom styles for actions in forms, dialogues, and more with support for multiple sizes, states, and more.
import {BaseButton} from '@/components'
Global usage
Vue.component(BaseButton.name, BaseButton)
For local usage
export default {
components: {
BaseButton
}
}
Examples
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<base-button type="default">Default</base-button>
<base-button type="primary">Primary</base-button>
<base-button type="info">Info</base-button>
<base-button type="success">Success</base-button>
<base-button type="danger">Danger</base-button>
<base-button type="warning">Warning</base-button>
Animation on hover
<base-button class="animation-on-hover" type="default">Default</base-button>
<base-button class="animation-on-hover" type="primary">Primary</base-button>
<base-button class="animation-on-hover" type="info">Info</base-button>
<base-button class="animation-on-hover" type="success">Success</base-button>
<base-button class="animation-on-hover" type="danger">Danger</base-button>
<base-button class="animation-on-hover" type="warning">Warning</base-button>
Style buttons
<base-button round type="primary">Primary</base-button>
<base-button round type="primary">
<i class="tim-icons icon-heart-2"></i> With Icon
</base-button>
<base-button round icon type="primary">
<i class="tim-icons icon-heart-2"></i>
</base-button>
<base-button simple type="primary">Simple</base-button>
<base-button link type="primary">Link</base-button>
<base-button loading type="primary">Loading</base-button>
<base-button block type="primary">Block</base-button>
Sizes
<base-button size="sm" type="primary">Small</base-button>
<base-button type="primary">Regular</base-button>
<base-button size="lg" type="primary">Large</base-button>
Disable state
Make buttons look inactive by adding the disabled
boolean attribute to the component
<base-button type="primary" disabled>Primary disabled</base-button>
<base-button type="secondary" disabled>Secondary disabled</base-button>
Disabled buttons using the <a>
element behave a bit different:
<a>
s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.- Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.
<base-button disabled tag="a" type="primary" href="#" role="button" aria-pressed="true">Primary link</base-button>
<base-button disabled tag="a" type="secondary" href="#" role="button" aria-pressed="true">Link</base-button>
Props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
tag | String | button | button Html tag |
round | Boolean | N/A | |
icon | Boolean | N/A | |
block | Boolean | N/A | |
loading | Boolean | N/A | |
wide | Boolean | N/A | |
disabled | Boolean | N/A | |
type | String | default | Button type (primary/secondary/danger etc) |
nativeType | String | button | Button native type (e.g button, input etc) |
size | String | N/A | Button size (sm/lg) |
simple | Boolean | N/A | Whether button is simple (outlined) |
link | Boolean | N/A | Whether button is a link (no borders or background) |