Introduction Installation

Introduction

Button

Render a buttons/link with optional icons (prefix, suffix, both).

Examples

<twig:ui:Button>

    Button

</twig:ui:Button>

<twig:ui:Button variant="secondary">

    Button

</twig:ui:Button>

<twig:ui:Button variant="accent">

    Button

</twig:ui:Button>

<twig:ui:Button variant="outline">

    Button

</twig:ui:Button>

<twig:ui:Button variant="ghost">

    Button

</twig:ui:Button>

<div class="flex flex-wrap items-center justify-center gap-4">

    <twig:ui:Button variant="link">

        Link

    </twig:ui:Button>

    <twig:ui:Button to="#">

        Link

    </twig:ui:Button>

</div>

<twig:ui:Button variant="outline" size="icon">

    <twig:ux:icon name="lucide:circle"/>

</twig:ui:Button>

<twig:ui:Button>

    <twig:block name="prefix">

        <twig:ux:icon name="lucide:circle"/>

    </twig:block>

    Button

</twig:ui:Button>

<twig:ui:Button>

    Button

    <twig:block name="suffix">

        <twig:ux:icon name="lucide:circle"/>

    </twig:block>

</twig:ui:Button>

<twig:ui:Button>

    <twig:block name="prefix">

        <twig:ux:icon name="lucide:circle"/>

    </twig:block>

    Button

    <twig:block name="suffix">

        <twig:ux:icon name="lucide:circle"/>

    </twig:block>

</twig:ui:Button>

<twig:ui:Button variant="success">

    Button

</twig:ui:Button>

<twig:ui:Button variant="info">

    Button

</twig:ui:Button>

<twig:ui:Button variant="warning">

    Button

</twig:ui:Button>

<twig:ui:Button variant="danger">

    Button

</twig:ui:Button>

<div class="flex flex-wrap items-center justify-center gap-4">

    <twig:ui:Button size="xs">

        Button

    </twig:ui:Button>

    <twig:ui:Button size="sm">

        Button

    </twig:ui:Button>

    <twig:ui:Button size="md">

        Button

    </twig:ui:Button>

    <twig:ui:Button size="lg">

        Button

    </twig:ui:Button>

</div>

On this page