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)