Components
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>
        <x-ui.icon name="ph--atom" class="flex" />
    </x-ui.button>
    <x-ui.button size="sm" iconOnly>
        <x-ui.icon name="ph--atom" class="flex" />
    </x-ui.button>
    <x-ui.button size="md" iconOnly>
        <x-ui.icon name="ph--atom" class="flex" />
    </x-ui.button>
    <x-ui.button size="lg" iconOnly>
        <x-ui.icon name="ph--atom" class="flex" />
    </x-ui.button>
    <x-ui.button size="xl" iconOnly>
        <x-ui.icon name="ph--atom" class="flex" />
    </x-ui.button>
</div>

With icon

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

Variants

Primary

Secondary

Accent

Success

Destructive

Neutral

Gray

Solid

Outline

Soft

Ghost

— —

— — —

—

— —

— — —

Edit this page

Input

Enhanced text input...