Button

Renders a <button type="button">, or an <a role="button"> when href is set.

<div class="btn-list">
    <twig:Tabler:Button variant="default">Cancel</twig:Tabler:Button>
    <twig:Tabler:Button variant="primary">Save changes</twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn">Cancel</button>
    <button type="button" class="btn btn-primary">Save changes</button>
</div>

Variants

variant sets the color. default is Tabler’s neutral button, a plain .btn:

<div class="btn-list">
    {% for variant in ['default', 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'] %}
        <twig:Tabler:Button variant="{{ variant }}">{{ variant|capitalize }}</twig:Tabler:Button>
    {% endfor %}
</div>

<div class="btn-list">
    <button type="button" class="btn">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-light">Light</button>
</div>

Appearances

appearance switches between a filled background, an outline border and a ghost button that only shows its background on hover. link looks like a link (btn-link) and ignores variant:

{% for appearance in ['filled', 'outline', 'ghost'] %}
    <div class="btn-list mb-2">
        {% for variant in ['default', 'primary', 'success', 'danger'] %}
            <twig:Tabler:Button variant="{{ variant }}" appearance="{{ appearance }}">{{ appearance|capitalize }}</twig:Tabler:Button>
        {% endfor %}
    </div>
{% endfor %}
<div class="btn-list">
    <twig:Tabler:Button appearance="link">Link</twig:Tabler:Button>
</div>

<div class="btn-list mb-2">
    <button type="button" class="btn">Filled</button>
    <button type="button" class="btn btn-primary">Filled</button>
    <button type="button" class="btn btn-success">Filled</button>
    <button type="button" class="btn btn-danger">Filled</button>
</div>
<div class="btn-list mb-2">
    <button type="button" class="btn btn-outline">Outline</button>
    <button type="button" class="btn btn-outline-primary">Outline</button>
    <button type="button" class="btn btn-outline-success">Outline</button>
    <button type="button" class="btn btn-outline-danger">Outline</button>
</div>
<div class="btn-list mb-2">
    <button type="button" class="btn btn-ghost">Ghost</button>
    <button type="button" class="btn btn-ghost-primary">Ghost</button>
    <button type="button" class="btn btn-ghost-success">Ghost</button>
    <button type="button" class="btn btn-ghost-danger">Ghost</button>
</div>
<div class="btn-list">
    <button type="button" class="btn btn-link">Link</button>
</div>

action is a quiet, square icon button for a card header or a table row (btn-action): it ignores variant and only shows a background on hover. Give it an aria-label, and group several in ButtonActions:

<twig:Tabler:ButtonActions>
    <twig:Tabler:Button appearance="action" aria-label="Edit"><twig:Tabler:Icon name="edit" /></twig:Tabler:Button>
    <twig:Tabler:Button appearance="action" aria-label="Share"><twig:Tabler:Icon name="share" /></twig:Tabler:Button>
    <twig:Tabler:Button appearance="action" aria-label="Delete"><twig:Tabler:Icon name="trash" /></twig:Tabler:Button>
</twig:Tabler:ButtonActions>

<div class="btn-actions">
    <button type="button" class="btn btn-action" aria-label="Edit"><i class="ti ti-edit"></i></button>
    <button type="button" class="btn btn-action" aria-label="Share"><i class="ti ti-share"></i></button>
    <button type="button" class="btn btn-action" aria-label="Delete"><i class="ti ti-trash"></i></button>
</div>

Sizes

<div class="btn-list">
    <twig:Tabler:Button size="sm">Small</twig:Tabler:Button>
    <twig:Tabler:Button size="md">Medium</twig:Tabler:Button>
    <twig:Tabler:Button size="lg">Large</twig:Tabler:Button>
    <twig:Tabler:Button size="xl">Extra large</twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-sm btn-primary">Small</button>
    <button type="button" class="btn btn-primary">Medium</button>
    <button type="button" class="btn btn-lg btn-primary">Large</button>
    <button type="button" class="btn btn-xl btn-primary">Extra large</button>
</div>

Icons

Put an icon before the label, with the icon class so Tabler spaces it. iconOnly removes the label padding: give the button an aria-label.

<div class="btn-list">
    <twig:Tabler:Button variant="primary">
        <twig:Tabler:Icon name="plus" class="icon" /> New user
    </twig:Tabler:Button>
    <twig:Tabler:Button variant="default" appearance="outline">
        <twig:Tabler:Icon name="download" class="icon" /> Export
    </twig:Tabler:Button>
    <twig:Tabler:Button variant="danger" iconOnly="{{ true }}" aria-label="Delete">
        <twig:Tabler:Icon name="trash" class="icon" />
    </twig:Tabler:Button>
    <twig:Tabler:Button variant="default" appearance="ghost" iconOnly="{{ true }}" aria-label="Settings">
        <twig:Tabler:Icon name="settings" class="icon" />
    </twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-primary">
        <i class="ti ti-plus icon"></i>
        New user
    </button>
    <button type="button" class="btn btn-outline">
        <i class="ti ti-download icon"></i>
        Export
    </button>
    <button type="button" class="btn btn-icon btn-danger" aria-label="Delete"><i class="ti ti-trash icon"></i></button>
    <button type="button" class="btn btn-icon btn-ghost" aria-label="Settings">
        <i class="ti ti-settings icon"></i>
    </button>
</div>

animateIcon animates the icon when the button is hovered:

<div class="btn-list">
    <twig:Tabler:Button variant="default" animateIcon="pulse"><twig:Tabler:Icon name="heart" class="icon" /> Pulse</twig:Tabler:Button>
    <twig:Tabler:Button variant="default" animateIcon="rotate"><twig:Tabler:Icon name="refresh" class="icon" /> Rotate</twig:Tabler:Button>
    <twig:Tabler:Button variant="default" animateIcon="shake"><twig:Tabler:Icon name="bell" class="icon" /> Shake</twig:Tabler:Button>
    <twig:Tabler:Button variant="default" animateIcon="tada"><twig:Tabler:Icon name="star" class="icon" /> Tada</twig:Tabler:Button>
    <twig:Tabler:Button variant="default" animateIcon="move-start"><twig:Tabler:Icon name="arrow-left" class="icon" /> Move start</twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-animate-icon btn-animate-icon-pulse">
        <i class="ti ti-heart icon"></i>
        Pulse
    </button>
    <button type="button" class="btn btn-animate-icon btn-animate-icon-rotate">
        <i class="ti ti-refresh icon"></i>
        Rotate
    </button>
    <button type="button" class="btn btn-animate-icon btn-animate-icon-shake">
        <i class="ti ti-bell icon"></i>
        Shake
    </button>
    <button type="button" class="btn btn-animate-icon btn-animate-icon-tada">
        <i class="ti ti-star icon"></i>
        Tada
    </button>
    <button type="button" class="btn btn-animate-icon btn-animate-icon-move-start">
        <i class="ti ti-arrow-left icon"></i>
        Move start
    </button>
</div>

Shapes

pill rounds the corners fully, square removes the radius:

<div class="btn-list">
    <twig:Tabler:Button variant="primary" pill="{{ true }}">Pill</twig:Tabler:Button>
    <twig:Tabler:Button variant="primary" square="{{ true }}">Square</twig:Tabler:Button>
    <twig:Tabler:Button variant="primary" pill="{{ true }}" iconOnly="{{ true }}" aria-label="Like">
        <twig:Tabler:Icon name="heart" class="icon" />
    </twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-pill btn-primary">Pill</button>
    <button type="button" class="btn btn-square btn-primary">Square</button>
    <button type="button" class="btn btn-pill btn-icon btn-primary" aria-label="Like">
        <i class="ti ti-heart icon"></i>
    </button>
</div>

States

loading replaces the label with a spinner. disabled sets the disabled attribute on a <button>; on a link it adds the disabled class, aria-disabled="true" and tabindex="-1".

<div class="btn-list">
    <twig:Tabler:Button variant="primary" loading="{{ true }}">Deploying</twig:Tabler:Button>
    <twig:Tabler:Button variant="primary" disabled="{{ true }}">Disabled button</twig:Tabler:Button>
    <twig:Tabler:Button href="/invoices" variant="secondary" disabled="{{ true }}">Disabled link</twig:Tabler:Button>
</div>

<div class="btn-list">
    <button type="button" class="btn btn-loading btn-primary">Deploying</button>
    <button type="button" class="btn btn-primary" disabled>Disabled button</button>
    <a href="/invoices" class="btn disabled btn-secondary" role="button" aria-disabled="true" tabindex="-1">
        Disabled link
    </a>
</div>

Links and form buttons

With href, the button renders an <a> and type is ignored. Without it, type sets the button type, button by default:

<div class="btn-list">
    <twig:Tabler:Button href="/users/42" variant="secondary" appearance="ghost">View profile</twig:Tabler:Button>
    <twig:Tabler:Button type="submit" variant="primary">Create invoice</twig:Tabler:Button>
</div>

<div class="btn-list">
    <a href="/users/42" class="btn btn-ghost-secondary" role="button">View profile</a>
    <button type="submit" class="btn btn-primary">Create invoice</button>
</div>

Full width

<twig:Tabler:Button variant="primary" block="{{ true }}">Sign in</twig:Tabler:Button>

<button type="button" class="btn w-100 btn-primary">Sign in</button>

Floating

floating pins the button to the bottom corner of the viewport (btn-floating), for the main action of a page:

<twig:Tabler:Button variant="primary" floating="{{ true }}" iconOnly="{{ true }}" aria-label="New ticket">
    <twig:Tabler:Icon name="plus" class="icon" />
</twig:Tabler:Button>

<button type="button" class="btn btn-icon btn-floating btn-primary" aria-label="New ticket">
    <i class="ti ti-plus icon"></i>
</button>

Confetti

Confetti needs no component: tabler.js binds it to any element with data-bs-toggle="confetti", and attributes are forwarded to the button:

<twig:Tabler:Button variant="success" data-bs-toggle="confetti" data-bs-count="150">Celebrate</twig:Tabler:Button>

<button type="button" class="btn btn-success" data-bs-toggle="confetti" data-bs-count="150">Celebrate</button>

Props

Prop	Type	Default	Description
`variant`	string	`'primary'`	`default` (neutral) `primary` `secondary` `success` `danger` `warning` `info` `dark` `light`
`appearance`	string	`'filled'`	`filled` `outline` `ghost` `link` (`btn-link`) `action` (`btn-action`); `link` and `action` ignore `variant`
`size`	string	`'md'`	`sm` `md` `lg` `xl`
`href`	string?	`null`	Renders `<a href role="button">` instead of `<button>`
`type`	string	`'button'`	`button` `submit` `reset`, ignored for links
`pill`	bool	`false`	Fully rounded corners (`btn-pill`)
`square`	bool	`false`	No border radius (`btn-square`)
`iconOnly`	bool	`false`	Icon-only button (`btn-icon`)
`loading`	bool	`false`	Spinner instead of the label (`btn-loading`)
`block`	bool	`false`	Full width (`w-100`)
`disabled`	bool	`false`	`disabled` attribute on `<button>`; `disabled` class, `aria-disabled` and `tabindex` on `<a>`
`floating`	bool	`false`	Pinned to the bottom corner of the viewport (`btn-floating`)
`animateIcon`	string?	`null`	Animates the icon on hover: `pulse` `rotate` `shake` `tada` `move-start` (`btn-animate-icon-*`)

Other attributes go to the <button> or <a>. The children are the label.