Button

Variants

Link

<div class="flex flex-wrap items-center gap-2">
	{ui button, title: 'Primary' /}
	{ui button, title: 'Secondary', variant: 'secondary' /}
	{ui button, title: 'Outline', variant: 'outline' /}
	{ui button, title: 'Ghost', variant: 'ghost' /}
	{ui button, title: 'Destructive', variant: 'destructive' /}
	{ui button, title: 'Link', variant: 'link', href: '#' /}
</div>

Use one primary button per area for the main action, and secondary, outline or ghost for the rest. destructive is for actions that delete or can't be undone.

Sizes

<div class="flex flex-wrap items-center gap-2">
	{ui button, title: 'Small', size: 'sm' /}
	{ui button, title: 'Default' /}
	{ui button, title: 'Large', size: 'lg' /}
	{ui button,
		icon: 'plus',
		size: 'icon',
		attrs: ['aria-label' => 'Add'],
	/}
</div>

size: 'icon' makes a square button for an icon alone. Give it an aria-label, since it has no text.

Size by breakpoint

{ui button, title: 'Grows at lg', class: 'lg:btn-lg' /}

The size param can't change by breakpoint, so each size is also a class: btn-sm, btn-lg, btn-icon, with any responsive prefix.

With an icon

<div class="flex flex-wrap items-center gap-2">
	{ui button, title: 'New page', icon: 'plus' /}
	{ui button, title: 'Download', icon: 'download', variant: 'outline' /}
</div>

Disabled

Link

<div class="flex flex-wrap items-center gap-2">
	{ui button, title: 'Button', disabled: true /}
	{ui button, title: 'Link', href: '#', disabled: true /}
</div>

A disabled link has no disabled attribute to set, so it gets aria-disabled and leaves the tab order instead.

Param	Default	Description
title	''	the text
href	null	renders an <a> instead of a <button>
type	'button'	button, submit or reset; ignored with href
variant	null	secondary, outline, ghost, destructive or link
size	null	sm, lg or icon
icon	null	an icon name, before the title
disabled	false	a link gets aria-disabled and leaves the tab order
class	''	added to btn, e.g. lg:btn-lg
attrs	[]	any other attributes, e.g. ['hx-post' => $url]

Params