Button

Your user's gateway to interactive functionalities.

 
<div class="flex flex-wrap gap-3">
    <button class="btn variant-solid sz-sm intent-primary">Generate</button>
    <button class="btn variant-outlined sz-sm intent-primary">Generate</button>
    <button class="btn variant-soft sz-sm intent-primary">Generate</button>
    <button class="btn variant-ghost sz-sm intent-primary">Generate</button>
</div>

Reference

Button

The button component have the following props

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]
intent
enum
intent-[intent]

Icons example

 
<div class="flex items-end gap-3">
    <button class="btn variant-solid sz-sm intent-primary">
        <svg class="-ml-0.5" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
        Generate
    </button>
    <button class="btn variant-solid icon-only sz-sm intent-primary" aria-label="Generate">
        <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
    </button>
    <button class="btn variant-solid sz-sm intent-primary">
        Generate
        <svg class="-mr-0.5" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg>
    </button>
</div>

Loading example

 
<button class="btn variant-solid sz-sm intent-primary pointer-events-none">
    <svg class="-ml-0.5 animate-spin" xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="m16.2 7.8 2.9-2.9"/><path d="M18 12h4"/><path d="m16.2 16.2 2.9 2.9"/><path d="M12 18v4"/><path d="m4.9 19.1 2.9-2.9"/><path d="M2 12h4"/><path d="m4.9 4.9 2.9 2.9"/></svg>
    Loading...
</button>

Disabled example

 
<button disabled class="btn variant-solid sz-sm intent-primary">
    Submit
</button>

Sizes example

 
<div class="space-y-3">
    <div class="flex items-end flex-wrap gap-3">
        <button class="btn variant-solid sz-xs intent-primary">Xs</button>
        <button class="btn variant-solid sz-sm intent-primary">Sm</button>
        <button class="btn variant-solid sz-md intent-primary">Md</button>
        <button class="btn variant-solid sz-lg intent-primary">Lg</button>
        <button class="btn variant-solid sz-xl intent-primary">Xl</button>
    </div>
    <div class="flex items-end flex-wrap gap-3">
        <button class="btn variant-outlined sz-xs intent-primary">Xs</button>
        <button class="btn variant-outlined sz-sm intent-primary">Sm</button>
        <button class="btn variant-outlined sz-md intent-primary">Md</button>
        <button class="btn variant-outlined sz-lg intent-primary">Lg</button>
        <button class="btn variant-outlined sz-xl intent-primary">Xl</button>
    </div>
    <div class="flex items-end flex-wrap gap-3">
        <button class="btn variant-soft sz-xs intent-primary">Xs</button>
        <button class="btn variant-soft sz-sm intent-primary">Sm</button>
        <button class="btn variant-soft sz-md intent-primary">Md</button>
        <button class="btn variant-soft sz-lg intent-primary">Lg</button>
        <button class="btn variant-soft sz-xl intent-primary">Xl</button>
    </div>
    <div class="flex items-end flex-wrap gap-3">
        <button class="btn variant-ghost sz-xs intent-primary">Xs</button>
        <button class="btn variant-ghost sz-sm intent-primary">Sm</button>
        <button class="btn variant-ghost sz-md intent-primary">Md</button>
        <button class="btn variant-ghost sz-lg intent-primary">Lg</button>
        <button class="btn variant-ghost sz-xl intent-primary">Xl</button>
    </div>
</div>