component

TuxButton

Wraps UButton. The intent prop picks one of four TTI-conventional combinations — primary, secondary, ghost, destructive — so call sites don't have to remember that "destructive" means outline + error + btn-fill-on-hover. Every other UButton prop still works (size, icon, loading, to, disabled).

intents

Four semantic roles

<tux-button intent="primary">Primary</tux-button>
<tux-button intent="secondary">Secondary</tux-button>
<tux-button intent="ghost">Ghost</tux-button>
<tux-button intent="destructive">Destructive</tux-button>

Hover the destructive button — outline fills solid red with white text.

with icon

Leading & trailing icons

<tux-button intent="primary" icon="lucide:play">Run</tux-button>
<tux-button intent="secondary" icon="lucide:download">Export CSV</tux-button>
<tux-button intent="ghost" trailing-icon="lucide:arrow-right">Next</tux-button>
<tux-button intent="destructive" icon="lucide:trash-2">Delete</tux-button>

states

Loading & disabled

<tux-button intent="primary" :loading="isLoading" icon="lucide:refresh-cw">
  {{ isLoading ? "Working…" : "Reload" }}
</tux-button>
<tux-button intent="secondary" disabled>Disabled</tux-button>
<tux-button intent="destructive" disabled>Disabled destructive</tux-button>

sizes

All sizes

<tux-button intent="primary" size="xs">Size xs</tux-button>
<tux-button intent="primary" size="sm">Size sm</tux-button>
<tux-button intent="primary" size="md">Size md</tux-button>
<tux-button intent="primary" size="lg">Size lg</tux-button>
<tux-button intent="primary" size="xl">Size xl</tux-button>

as link

With `to` prop

Pass to and TuxButton renders as NuxtLink under the hood.

Browse tokens All components 
<tux-button intent="primary" to="/tokens" trailing-icon="lucide:arrow-right">
  Browse tokens
</tux-button>
<tux-button intent="secondary" to="/components" icon="lucide:layers">
  All components
</tux-button>