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 
flexi-cli add button

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>

Examples

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