1. Components
  2. button

Button

Versatile action trigger with support for loading states and icons.

Demo 

<x-ui.button aria-label="Default button">
    Click Me
</x-ui.button>

Installation

Shell 
php artisan flexi:add button

Button Principles

In Flexiwind, a button is defined by three core dimensions: variant, intent, and size. This separation ensures visual consistency, clear action hierarchy, and full themeability.

Variant controls the visual treatment of the button, while intent communicates the meaning of the action. If you want to customize the variant, take a look at the button utilities page.

API

Prop Description
variant (solid|soft|outline|ghost|none)
Controls visual style and default intent behavior.
intent (string|null)
Semantic color tone. Falls back to variant defaults when omitted.
size (xs|sm|md|lg|xl)
Defines button dimensions and typography.
iconOnly (boolean)
Switches to icon-size geometry for icon-only actions.
disabled (boolean)
Disables interaction and applies accessibility attributes.
href (string|null)
When set, renders as anchor; external links open in a new tab.

Examples

Sizes 

<div class="flex flex-wrap items-center gap-2">
    <x-ui.button size="xs">
        Click me
    </x-ui.button>
     <x-ui.button size="sm">
        Click me
    </x-ui.button>
     <x-ui.button size="md">
        Click me
    </x-ui.button>
     <x-ui.button size="lg">
        Click me
    </x-ui.button>
     <x-ui.button size="xl">
        Click me
    </x-ui.button>
</div>

Icons 

<div class="flex flex-wrap items-center gap-2">
    <x-ui.button size="xs" iconOnly>
        <span aria-hidden="true" class="flex iconify ph--atom"></span>
    </x-ui.button>
    <x-ui.button size="sm" iconOnly>
        <span aria-hidden="true" class="flex iconify ph--atom"></span>
    </x-ui.button>
    <x-ui.button size="md" iconOnly>
        <span aria-hidden="true" class="flex iconify ph--atom"></span>
    </x-ui.button>
    <x-ui.button size="lg" iconOnly>
        <span aria-hidden="true" class="flex iconify ph--atom"></span>
    </x-ui.button>
    <x-ui.button size="xl" iconOnly>
        <span aria-hidden="true" class="flex iconify ph--atom"></span>
    </x-ui.button>
</div>

With icon 

<div class="flex flex-wrap items-center gap-2">
    <x-ui.button aria-label="Default button">
        <span aria-hidden="true" class="flex iconify ph--atom mr-1.5"></span>
        leading
    </x-ui.button>
    <x-ui.button aria-label="Default button">
        trailing
        <span aria-hidden="true" class="flex iconify ph--atom ml-1.5"></span>
    </x-ui.button>
</div>

Variants

Primary
Secondry
Accent
Success
Info
Warning
Danger
Gray
Neutral
White
Solid
Outline
Soft
Ghost
Prev
Input

Enhanced text input...

Next
On this page