Button (TButton)

VueJs reactive <button /> component with configurable classes, variants, and most common events. Friendly with utility-first frameworks like TailwindCSS..

Playground:

In this tab you can modify the TailwindCSS classes of the theme we create as example, you can also edit or delete as many variants as you wish. Once you finished you can preview your theme on the demo tab or grab the settings from the settings tab.

Fixed classes

Fixed classes shared by all the variants

Classes

Base classes

Classes used by default (when no variant is applied)

Classes

block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Variants:

Variant name

Variant classes

Classes used when the secondary variant is applied

Classes

block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Remove variant

Variant name

Variant classes

Classes used when the error variant is applied

Classes

block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Remove variant

Variant name

Variant classes

Classes used when the success variant is applied

Classes

block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Remove variant

Variant name

Variant classes

Classes used when the link variant is applied

Classes

block px-4 py-2 transition duration-100 ease-in-out focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Remove variant

Example variants

Default secondary error success link

Basic example

<t-button>Example button</t-button>

Props

Property	Type	Default value	Description
value (`v-model`)	`[String, Number]`	`null`	HTML attribute
id	`String`	`undefined`	HTML attribute
name	`String`	`undefined`	HTML attribute
disabled	`Boolean`	`undefined`	HTML attribute
readonly	`Boolean`	`undefined`	HTML attribute
autofocus	`Boolean`	`undefined`	HTML attribute
required	`Boolean`	`undefined`	HTML attribute
type	`String`	`undefined`	HTML attribute
tabindex	`[String, Number]`	`undefined`	HTML attribute
text	`String`	`undefined`	Text of the button (when no slot used)
tagName	`String`	`'button'`	HTML Tag to use for the component `button` or `a`
href	`String`	`null`	Href attribute for `a`
native	`Boolean`	`false`	Set to force to render the default button instead for a router-link, inertia-link, etc
classes	`[String, Array, Object]`	...	The default CSS classes
fixedClasses	`[String, Array, Object]`	`undefined`	Fixed CSS classes that will be merged with the active set of classes
variants	`Object`	`undefined`	The different variants of classes the component have
variant	`[String, Object]`	`undefined`	The variant that will be used

Note: when the href prop is set it will change the tag name to a.

Default value of the classes prop:

block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50

VueRouter compatibility

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

RouterLink Props

When the component is rendered as RouterLink you can use the properties of that component:

Property	Type	Default value
to	`[String, Object]`	`undefined`
replace	`Boolean`	`false`
append	`Boolean`	`false`
exact	`Boolean`	`false`
activeClass	`String`	`'router-link-active'`
exactActiveClass	`String`	`'router-link-exact-active'`

InertiaJs compatibility

This button is compatible with inertia-link and will be converted if the href prop is set, the tagName is 'a' and the InertiaLink component is available.

Pro tip: You can create a custom component, so you don't need to change the `tagName` every time. (See override settings)

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'

import TButton from 'vue-tailwind/dist/t-button'

const settings = {
  // Set the tagName as `a` so you can use easily use with Inertia
  't-inertia': {
    component: TButton,
    props: {
      tagName: 'a',
    }
  },
}

Vue.use(VueTailwind, settings)

InertiaLink Props

When the component is rendered as RouterLink you can use the properties of that component:

Property	Type	Default value
method	`String`	`'get'`
data	`Object`	`{}`
preserveState	`Boolean`	`false`
preserveScroll	`Boolean`	`false`
event	`[String, Array]`	`'click'`
only	`Array`	`[]`

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