View as Markdown

Button

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

Loading... 
<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

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

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 app:

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

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.

Loading... 
<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.

Loading... 
<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.

Loading... 
<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.

Loading... 
<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.

Loading... 
<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:

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

API Reference

<twig:Button>

Prop Type Default
variant 
 'brand'|'secondary'|'tertiary'|'success'|'danger'|'warning'|'dark'|'ghost'|'outline'|'outline-brand'|'outline-success'|'outline-danger'|'outline-warning' 'brand'
size 
 'default'|'xs'|'sm'|'lg'|'xl'|'icon'|'icon-xs'|'icon-sm' 'default'
shape 
 'rounded'|'pill' 'rounded'
as 
 'button' 'button'
Block Description
content The button label and/or icon.