VueTailwind

# Button

# Playground

Button size

Button variant

# Basic example

<t-button variant="primary">Primary button</t-button>
<t-button variant="secondary">Secondary button</t-button>
<t-button size="lg">Large button</t-button>

# VueRouter compatibility

This button is compatible with vue-router, you just need to define the to prop and if the router-link or nuxt-link component is available it will render the component.

# Events

Event Arguments Description
focus FocusEvent Emitted when the button is focused
blur FocusEvent Emitted when the button is blurred
click MouseEvent Emitted when the button is clicked

# Props

Property Type Default value Accepted values
id String null Any valid type
autofocus Boolean false Any valid type
disabled Boolean false Any valid type
name String null Any valid type
tabindex String / Number null Any valid type
value String / Number null Any valid type
type String 'button' Any valid type
variant String undefined 'primary', 'secondary', 'tertiary', 'danger', 'warning', 'success'
size String undefined 'sm', 'lg'
href String null Any valid type
tagName+ String 'button' 'button', 'a'

Note: when the href is set it changes the tagname to a

This button is compatible with vue-router, you just need to define the to prop and if the router-link or nuxt-link component is available it will render it.

In that case the valid props are the following:

Property Type Default value Accepted values
to String / Object undefined Valide router-link locatiion
replace Boolean false true, false
append Boolean false true, false
activeClass String 'router-link-active' Any string
exact Boolean false true, false
exactActiveClass String 'router-link-active' Any string
Property Description
baseClass Base button class (never changes)
defaultClass Classes for the default button variant
primaryClass Classes for the primary button variant
secondaryClass Classes for the secondary button variant
tertiaryClass Classes for the tertiary button variant
successClass Classes for the success button variant
dangerClass Classes for the danger button variant
warningClass Classes for the warning button variant
disabledClass Classes for the disabled button variant (Added to the variant)
defaultSizeClass Classes for the default size button (Added to the variant)
largeSizeClass Classes for the large size button (Added to the variant)
smallSizeClass Classes for the small size button (Added to the variant)

# Default theme settings

const TButton = {
  baseClass: 'border block rounded inline-flex items-center justify-center',
  defaultClass: 'bg-white border-gray-400 hover:bg-gray-100 hover:border-gray-500',
  primaryClass: 'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600',
  secondaryClass: 'border-blue-500 text-blue-500 bg-white hover:border-blue-600 hover:text-blue-600 hover:bg-white',
  tertiaryClass: 'border block underline text-blue-500 border-transparent bg-transparent hover:text-blue-600',
  successClass: 'text-white bg-green-500 border-green-500 hover:bg-green-600 hover:border-green-600',
  dangerClass: 'text-white bg-red-500 border-red-500 hover:bg-red-600 hover:border-red-600',
  warningClass: 'text-yellow-900 bg-yellow-500 border-yellow-500 hover:bg-yellow-600 hover:border-yellow-600',
  disabledClass: 'cursor-not-allowed opacity-75',
  defaultSizeClass: 'px-6 py-3',
  largeSizeClass: 'px-8 py-4 text-lg',
  smallSizeClass: 'px-4 py-2 text-sm',
}

export default TButton
  • Remember that in order to change the default settings you can change default theme or use the props:
<t-button
  base-class="shadow border block rounded inline-flex items-center justify-center uppercase text-sm font-bold"
  default-class="bg-gray-100 border-gray-100 hover:shadow-lg"
>Hello 😎</t-button>

# The result:

← Checkbox →