Button

Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

<div class="space-x-2 space-y-2">
    <twig:Button>Default</twig:Button>
    <twig:Button variant="secondary">Secondary</twig:Button>
    <twig:Button variant="tertiary">Tertiary</twig:Button>
    <twig:Button variant="success">Success</twig:Button>
    <twig:Button variant="danger">Danger</twig:Button>
    <twig:Button variant="warning">Warning</twig:Button>
    <twig:Button variant="dark">Dark</twig:Button>
    <twig:Button variant="ghost">Ghost</twig:Button>
</div>

Installation

bin/console ux:install button --kit flowbite-4

That's it!

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your Symfony app:

templates/components/Button.html.twig

{# @prop variant 'brand'|'secondary'|'tertiary'|'success'|'danger'|'warning'|'dark'|'ghost'|'outline'|'outline-brand'|'outline-success'|'outline-danger'|'outline-warning' The visual style variant. Defaults to `brand` #}
{# @prop size 'default'|'xs'|'sm'|'lg'|'xl'|'icon'|'icon-xs'|'icon-sm' The button size. Defaults to `default` #}
{# @prop shape 'rounded'|'pill' The badge shape. Defaults to `rounded` #}
{# @prop as 'button' The HTML tag to render. Defaults to `button` #}
{# @block content The button label and/or icon #}
{%- props variant = 'brand', size = 'default', shape = 'rounded', as = 'button' -%}
{%- set style = html_cva(
    base: 'inline-flex items-center justify-center box-border border border-transparent font-medium focus:ring-4 focus:outline-none shadow-xs',
    variants: {
        variant: {
            brand: 'text-white bg-brand hover:bg-brand-strong focus:ring-brand-medium',
            secondary: 'text-body bg-neutral-secondary-medium border-default-medium hover:bg-neutral-tertiary-medium hover:text-heading focus:ring-neutral-tertiary',
            tertiary: 'text-body bg-neutral-primary-soft border-default hover:bg-neutral-secondary-medium hover:text-heading focus:ring-neutral-tertiary-soft',
            success: 'text-white bg-success hover:bg-success-strong focus:ring-success-medium',
            danger: 'text-white bg-danger hover:bg-danger-strong focus:ring-danger-medium',
            warning: 'text-white bg-warning hover:bg-warning-strong focus:ring-warning-medium',
            dark: 'text-white bg-dark hover:bg-dark-strong focus:ring-neutral-tertiary',
            ghost: 'text-heading bg-transparent hover:bg-neutral-secondary-medium focus:ring-neutral-tertiary shadow-none',
            outline: 'text-body bg-neutral-primary border-default hover:bg-neutral-secondary-soft hover:text-heading focus:ring-neutral-tertiary',
            'outline-brand': 'text-fg-brand bg-neutral-primary border-brand hover:bg-brand hover:text-white focus:ring-brand-subtle',
            'outline-success': 'text-success bg-neutral-primary border-success hover:bg-success hover:text-white focus:ring-neutral-tertiary',
            'outline-danger': 'text-danger bg-neutral-primary border-danger hover:bg-danger hover:text-white focus:ring-neutral-tertiary',
            'outline-warning': 'text-warning bg-neutral-primary border-warning hover:bg-warning hover:text-white focus:ring-neutral-tertiary',
        },
        size: {
            default: 'leading-5 text-sm px-4 py-2.5',
            xs: 'leading-5 text-xs px-3 py-1.5',
            sm: 'leading-5 text-sm px-3 py-2',
            lg: 'text-base px-5 py-3',
            xl: 'text-base px-6 py-3.5',
            icon: 'w-10 h-10',
            'icon-xs': 'w-8 h-8',
            'icon-sm': 'w-9 h-9',
        },
        shape: {
            rounded: 'rounded-base',
            pill: 'rounded-full',
        },
    },
) -%}
<{{ as }}
    class="{{ style.apply({variant: variant, size: size, shape: shape}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

Happy coding!

Usage

<twig:Button
    variant="brand | secondary | tertiary | success | danger | warning | dark | ghost | outline | outline-brand | outline-success | outline-danger | outline-warning"
    size="default | xs | sm | lg | xl | icon | icon-xs | icon-sm"
    shape="rounded | pill"
>
    Button
</twig:Button>

Examples

Button pills

The button pills can be used as an alternative style by using fully rounded edges.

<div class="space-x-2 space-y-2">
    <twig:Button shape="pill">Default</twig:Button>
    <twig:Button shape="pill" variant="secondary">Secondary</twig:Button>
    <twig:Button shape="pill" variant="tertiary">Tertiary</twig:Button>
    <twig:Button shape="pill" variant="success">Success</twig:Button>
    <twig:Button shape="pill" variant="danger">Danger</twig:Button>
    <twig:Button shape="pill" variant="warning">Warning</twig:Button>
    <twig:Button shape="pill" variant="dark">Dark</twig:Button>
    <twig:Button shape="pill" variant="ghost">Ghost</twig:Button>
</div>

Outline buttons

Use the following button styles to show the colors only for the border of the element.

<div class="space-x-2 space-y-2">
    <twig:Button variant="outline">Outline</twig:Button>
    <twig:Button variant="outline-brand">Brand</twig:Button>
    <twig:Button variant="outline-success">Success</twig:Button>
    <twig:Button variant="outline-danger">Danger</twig:Button>
    <twig:Button variant="outline-warning">Warning</twig:Button>
</div>

Button sizes

Use these examples if you want to use smaller or larger buttons.

<div class="space-x-2 space-y-2">
    <twig:Button size="xs">Extra small</twig:Button>
    <twig:Button size="sm">Small</twig:Button>
    <twig:Button size="default">Base</twig:Button>
    <twig:Button size="lg">Large</twig:Button>
    <twig:Button size="xl">Extra large</twig:Button>
</div>

Button with icon

Use the following examples to add a SVG icons inside the button either on the left or right side.

<div class="flex items-center space-x-2">
    <twig:Button>
        <twig:ux:icon name="flowbite:cart-outline" class="w-4 h-4 me-1.5 -ms-0.5" aria-hidden="true"/>
        Buy now
    </twig:Button>

    <twig:Button>
        Choose plan
        <twig:ux:icon name="flowbite:arrow-right-outline"  class="w-4 h-4 ms-1.5 -me-0.5" aria-hidden="true"/>
    </twig:Button>
</div>

Icon buttons

Sometimes you need a button to indicate an action using only an icon.

<div class="space-x-2 space-y-2">
    <twig:Button size="icon-xs">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-sm">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-xs" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon-sm" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>

    <twig:Button size="icon" variant="outline">
        <twig:ux:icon name="flowbite:heart-outline" class="w-5 h-5" aria-hidden="true"/>
        <span class="sr-only">Icon description</span>
    </twig:Button>
</div>

Loader button

Use the following spinner components from Flowbite to indicate a loader animation inside buttons:

<div class="space-x-2 space-y-2">
    <twig:Button>
        <twig:Spinner class="me-2" />
        Loading...
    </twig:Button>
</div>

API Reference

Button

Prop	Type	Description
`variant`	`'brand'\|'secondary'\|'tertiary'\|'success'\|'danger'\|'warning'\|'dark'\|'ghost'\|'outline'\|'outline-brand'\|'outline-success'\|'outline-danger'\|'outline-warning'`	The visual style variant. Defaults to `brand`
`size`	`'default'\|'xs'\|'sm'\|'lg'\|'xl'\|'icon'\|'icon-xs'\|'icon-sm'`	The button size. Defaults to `default`
`shape`	`'rounded'\|'pill'`	The badge shape. Defaults to `rounded`
`as`	`'button'`	The HTML tag to render. Defaults to `button`

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