Button - Laravel Blade

Use the button component inside forms, as links, social login buttons, and more with support for multiple colors, sizes, and states.

Default Buttons

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.button color="blue">Default</x-fwb.button>
    <x-fwb.button color="dark">Dark</x-fwb.button>
    <x-fwb.button color="light">Light</x-fwb.button>
    <x-fwb.button color="green">Green</x-fwb.button>
    <x-fwb.button color="red">Red</x-fwb.button>
    <x-fwb.button color="yellow">Yellow</x-fwb.button>
    <x-fwb.button color="purple">Purple</x-fwb.button>
</div>

Outline Buttons

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.button color="blue" :outline="true">Default</x-fwb.button>
    <x-fwb.button color="dark" :outline="true">Dark</x-fwb.button>
    <x-fwb.button color="green" :outline="true">Green</x-fwb.button>
    <x-fwb.button color="red" :outline="true">Red</x-fwb.button>
    <x-fwb.button color="yellow" :outline="true">Yellow</x-fwb.button>
    <x-fwb.button color="purple" :outline="true">Purple</x-fwb.button>
</div>

Pill Buttons

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.button :pill="true" color="blue">Default</x-fwb.button>
    <x-fwb.button :pill="true" color="dark">Dark</x-fwb.button>
    <x-fwb.button :pill="true" color="light">Light</x-fwb.button>
    <x-fwb.button :pill="true" color="green">Green</x-fwb.button>
    <x-fwb.button :pill="true" color="red">Red</x-fwb.button>
    <x-fwb.button :pill="true" color="yellow">Yellow</x-fwb.button>
    <x-fwb.button :pill="true" color="purple">Purple</x-fwb.button>
</div>

Button Sizes

Blade code

<div class="flex flex-wrap items-center gap-2">
    <x-fwb.button size="xs">Extra small</x-fwb.button>
    <x-fwb.button size="sm">Small</x-fwb.button>
    <x-fwb.button size="md">Base</x-fwb.button>
    <x-fwb.button size="lg">Large</x-fwb.button>
    <x-fwb.button size="xl">Extra large</x-fwb.button>
</div>

Buttons with Icon

Blade code

<div class="flex flex-wrap gap-2">
    <x-fwb.button color="blue" fwb-icon="s-shopping-cart">Buy now</x-fwb.button>
    <x-fwb.button color="blue">
        Choose plan
        <x-fwb-o-arrow-right class="w-3.5 h-3.5 ms-2 rtl:rotate-180" />
    </x-fwb.button>
</div>

Disabled Button

Blade code

<x-fwb.button :disabled="true">Disabled button</x-fwb.button>

Button as Link

Link button

Blade code

<x-fwb.button href="#">Link button</x-fwb.button>

Button with Label

Blade code

<x-fwb.button color="blue">
    Messages
    <span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">2</span>
</x-fwb.button>

Loader Button

Blade code

<x-fwb.button color="blue" :disabled="true">
    <x-fwb.spinner size="sm" color="white" class="me-3" />
    Loading...
</x-fwb.button>

Button Group

Blade code

<x-fwb.button.group>
    <x-fwb.button color="blue">Profile</x-fwb.button>
    <x-fwb.button color="blue">Settings</x-fwb.button>
    <x-fwb.button color="blue">Messages</x-fwb.button>
</x-fwb.button.group>

Outline Button Group

Blade code

<x-fwb.button.group>
    <x-fwb.button color="blue" :outline="true">Profile</x-fwb.button>
    <x-fwb.button color="blue" :outline="true">Settings</x-fwb.button>
    <x-fwb.button color="blue" :outline="true">Messages</x-fwb.button>
</x-fwb.button.group>

Component Properties

Button x-fwb.button

Prop Type Default Description
color string blue Button color. Options: blue, red, green, yellow, purple, dark, light.
size string md Button size. Options: xs, sm, md, lg, xl.
pill bool false Use fully rounded pill shape.
outline bool false Use outline/bordered style instead of solid fill.
disabled bool false Disable the button with reduced opacity and no interaction.
href string|null null Render as an anchor link instead of a button.
fwb-icon string|null null Shorthand leading icon name from flowbite-blade-icons (e.g. s-shopping-cart). Renders with default w-3.5 h-3.5 me-2 classes.
icon slot — Named slot for full leading icon control. Takes priority over fwb-icon prop.
tag string|null null Override the HTML tag. Defaults to button or a if href is set.

Button Group x-fwb.button.group

Prop Type Default Description
slot slot - Default slot containing the button components to group together.