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.

Primary link Link

<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)