Button (TButton)

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


Basic example

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


PropertyTypeDefault valueDescription
value (v-model)[String, Number]nullHTML attribute
idStringundefinedHTML attribute
nameStringundefinedHTML attribute
disabledBooleanundefinedHTML attribute
readonlyBooleanundefinedHTML attribute
autofocusBooleanundefinedHTML attribute
requiredBooleanundefinedHTML attribute
typeStringundefinedHTML attribute
tabindex[String, Number]undefinedHTML attribute
textStringundefinedText of the button (when no slot used)
tagNameString'button'HTML Tag to use for the component button or a
hrefStringnullHref attribute for a
nativeBooleanfalseSet 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]undefinedFixed CSS classes that will be merged with the active set of classes
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe 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.

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

PropertyTypeDefault value
to[String, Object]undefined

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)

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

PropertyTypeDefault value
event[String, Array]'click'


focusFocusEventEmitted when the button is focused
blurFocusEventEmitted when the button is blurred
clickMouseEventEmitted when the button is clicked

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.