Button

Displays a button or a component that looks like a button.

<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:ui:Button>Solid</twig:ui:Button>
    <twig:ui:Button variant="soft">Soft</twig:ui:Button>
    <twig:ui:Button variant="outline">Outline</twig:ui:Button>
    <twig:ui:Button variant="ghost">Ghost</twig:ui:Button>
    <twig:ui:Button variant="link">Link</twig:ui:Button>
    <twig:ui:Button color="danger">Danger</twig:ui:Button>
</div>

Usage

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

Examples

Solid

<div class="flex flex-wrap gap-2">
    <twig:ui:Button>Neutral</twig:ui:Button>
    <twig:ui:Button color="red">Red</twig:ui:Button>
    <twig:ui:Button color="orange">Orange</twig:ui:Button>
    <twig:ui:Button color="amber">Amber</twig:ui:Button>
    <twig:ui:Button color="yellow">Yellow</twig:ui:Button>
    <twig:ui:Button color="lime">Lime</twig:ui:Button>
    <twig:ui:Button color="green">Green</twig:ui:Button>
    <twig:ui:Button color="emerald">Emerald</twig:ui:Button>
    <twig:ui:Button color="teal">Teal</twig:ui:Button>
    <twig:ui:Button color="cyan">Cyan</twig:ui:Button>
    <twig:ui:Button color="sky">Sky</twig:ui:Button>
    <twig:ui:Button color="blue">Blue</twig:ui:Button>
    <twig:ui:Button color="indigo">Indigo</twig:ui:Button>
    <twig:ui:Button color="violet">Violet</twig:ui:Button>
    <twig:ui:Button color="purple">Purple</twig:ui:Button>
    <twig:ui:Button color="fuchsia">Fuchsia</twig:ui:Button>
    <twig:ui:Button color="pink">Pink</twig:ui:Button>
    <twig:ui:Button color="rose">Rose</twig:ui:Button>
</div>

Soft

<div class="flex flex-wrap gap-2">
    <twig:ui:Button variant="soft">Neutral</twig:ui:Button>
    <twig:ui:Button variant="soft" color="red">Red</twig:ui:Button>
    <twig:ui:Button variant="soft" color="orange">Orange</twig:ui:Button>
    <twig:ui:Button variant="soft" color="amber">Amber</twig:ui:Button>
    <twig:ui:Button variant="soft" color="yellow">Yellow</twig:ui:Button>
    <twig:ui:Button variant="soft" color="lime">Lime</twig:ui:Button>
    <twig:ui:Button variant="soft" color="green">Green</twig:ui:Button>
    <twig:ui:Button variant="soft" color="emerald">Emerald</twig:ui:Button>
    <twig:ui:Button variant="soft" color="teal">Teal</twig:ui:Button>
    <twig:ui:Button variant="soft" color="cyan">Cyan</twig:ui:Button>
    <twig:ui:Button variant="soft" color="sky">Sky</twig:ui:Button>
    <twig:ui:Button variant="soft" color="blue">Blue</twig:ui:Button>
    <twig:ui:Button variant="soft" color="indigo">Indigo</twig:ui:Button>
    <twig:ui:Button variant="soft" color="violet">Violet</twig:ui:Button>
    <twig:ui:Button variant="soft" color="purple">Purple</twig:ui:Button>
    <twig:ui:Button variant="soft" color="fuchsia">Fuchsia</twig:ui:Button>
    <twig:ui:Button variant="soft" color="pink">Pink</twig:ui:Button>
    <twig:ui:Button variant="soft" color="rose">Rose</twig:ui:Button>
</div>

Outline

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

Ghost

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

Link

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

Danger

color="danger" is a shortcut for color="red".

<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:ui:Button color="danger">Danger</twig:ui:Button>
    <twig:ui:Button variant="soft" color="danger">Danger</twig:ui:Button>
</div>

Info

color="info" is a shortcut for color="blue".

<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:ui:Button color="info">Info</twig:ui:Button>
    <twig:ui:Button variant="soft" color="info">Info</twig:ui:Button>
</div>

Success

color="success" is a shortcut for color="green".

<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:ui:Button color="success">Success</twig:ui:Button>
    <twig:ui:Button variant="soft" color="success">Success</twig:ui:Button>
</div>

Warning

color="warning" is a shortcut for color="amber".

<div class="flex flex-wrap items-center gap-2 md:flex-row">
    <twig:ui:Button color="warning">Warning</twig:ui:Button>
    <twig:ui:Button variant="soft" color="warning">Warning</twig:ui:Button>
</div>

Size

Use the size prop to change the size of the button.

<div class="flex flex-col items-start gap-8 sm:flex-row">
    <div class="flex items-start gap-2">
        <twig:ui:Button size="xs" variant="outline">Extra Small</twig:ui:Button>
        <twig:ui:Button size="icon-xs" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:ui:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:ui:Button size="sm" variant="outline">Small</twig:ui:Button>
        <twig:ui:Button size="icon-sm" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:ui:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:ui:Button variant="outline">Default</twig:ui:Button>
        <twig:ui:Button size="icon" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:ui:Button>
    </div>
    <div class="flex items-start gap-2">
        <twig:ui:Button size="lg" variant="outline">Large</twig:ui:Button>
        <twig:ui:Button size="icon-lg" variant="outline" aria-label="Submit">
            <twig:ux:icon name="lucide:arrow-up-right" />
        </twig:ui:Button>
    </div>
</div>

Icon

<twig:ui:Button variant="outline" size="icon">
    <twig:ux:icon name="lucide:circle-fading-arrow-up" />
</twig:ui:Button>

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

<div class="flex items-start gap-2">
    <twig:ui:Button variant="outline" size="sm">
        <twig:ux:icon name="lucide:git-branch" data-icon="inline-start" />
        New Branch
    </twig:ui:Button>
    <twig:ui:Button variant="outline" size="sm">
        New Branch
        <twig:ux:icon name="lucide:git-branch" data-icon="inline-end" />
    </twig:ui:Button>
</div>

Rounded

Use the rounded-full class to make the button rounded.

<twig:ui:Button variant="outline" size="icon" class="rounded-full">
    <twig:ux:icon name="lucide:arrow-up"/>
</twig:ui:Button>

Loading

Render a spinning icon inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

<div class="flex gap-2">
    <twig:ui:Button variant="outline" disabled>
        <twig:ux:icon name="lucide:loader-circle" class="animate-spin" data-icon="inline-start" />
        Generating
    </twig:ui:Button>
    <twig:ui:Button variant="soft" disabled>
        Downloading
        <twig:ux:icon name="lucide:loader-circle" class="animate-spin" data-icon="inline-end" />
    </twig:ui:Button>
</div>

As Link

You can use the as prop on Button to make another element look like a button. Here's an example of a link that looks like a button.

<twig:ui:Button as="a" href="#">
    Login
</twig:ui:Button>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

<div class="flex flex-col gap-8">
    <div class="flex flex-wrap items-center gap-2 md:flex-row" dir="rtl">
        <twig:ui:Button variant="outline">زر</twig:ui:Button>
        <twig:ui:Button color="danger">حذف</twig:ui:Button>
        <twig:ui:Button variant="outline">
            إرسال
            <twig:ux:icon name="lucide:arrow-right" class="rtl:rotate-180" data-icon="inline-end" />
        </twig:ui:Button>
        <twig:ui:Button variant="outline" size="icon" aria-label="Add">
            <twig:ux:icon name="lucide:plus" />
        </twig:ui:Button>
        <twig:ui:Button variant="soft" disabled>
            <twig:ux:icon name="lucide:loader-circle" class="animate-spin" data-icon="inline-start" />
            جاري التحميل
        </twig:ui:Button>
    </div>
    <div class="flex flex-wrap items-center gap-2 md:flex-row" dir="rtl">
        <twig:ui:Button variant="outline">לחצן</twig:ui:Button>
        <twig:ui:Button color="danger">מחק</twig:ui:Button>
        <twig:ui:Button variant="outline">
            שלח
            <twig:ux:icon name="lucide:arrow-right" class="rtl:rotate-180" data-icon="inline-end" />
        </twig:ui:Button>
        <twig:ui:Button variant="outline" size="icon" aria-label="Add">
            <twig:ux:icon name="lucide:plus" />
        </twig:ui:Button>
        <twig:ui:Button variant="soft" disabled>
            <twig:ux:icon name="lucide:loader-circle" class="animate-spin" data-icon="inline-start" />
            טוען
        </twig:ui:Button>
    </div>
</div>

API Reference

`<twig:ui:Button>`

Prop	Type	Description
`variant`	`'solid'` \| `'soft'` \| `'outline'` \| `'ghost'` \| `'link'`	The visual style variant. Defaults to `solid`
`color`	`string`	Any Tailwind color name, such as `'purple'` or `'cyan'`, or a preset shortcut: `'danger'`, `'info'`, `'success'`, `'warning'`. Only affects the `solid` and `soft` variants. Defaults to `'neutral'`
`size`	`'md'` \| `'xs'` \| `'sm'` \| `'lg'` \| `'icon'` \| `'icon-xs'` \| `'icon-sm'` \| `'icon-lg'`	The button size. Defaults to `md`
`as`	`string`	The HTML tag to render. Defaults to `button`

Block	Description
`content`	The button label and/or icon