Button

    <div class="flex gap-1 items-center">
        <button class="button">Default</button>
        <button class="button primary">Primary</button>
        <button class="button secondary">Secondary</button>
        <button class="button accent">Accent</button>
        <button class="button info">Info</button>
        <button class="button success">Success</button>
        <button class="button warning">Warning</button>
        <button class="button danger">Danger</button>
        <button class="button ghost">Ghost</button>
        <button class="button link">Link</button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button xs">Default</button>
        <button class="button sm">Default</button>
        <button class="button">Default</button>
        <button class="button lg">Default</button>
        <button class="button xl">Default</button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button primary soft">Primary</button>
        <button class="button secondary soft">Secondary</button>
        <button class="button accent soft">Accent</button>
        <button class="button info soft">Info</button>
        <button class="button success soft">Success</button>
        <button class="button warning soft">Warning</button>
        <button class="button danger soft">Danger</button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button primary outlined">Primary</button>
        <button class="button secondary outlined">Secondary</button>
        <button class="button accent outlined">Accent</button>
        <button class="button info outlined">Info</button>
        <button class="button success outlined">Success</button>
        <button class="button warning outlined">Warning</button>
        <button class="button danger outlined">Danger</button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button primary rounded">Primary</button>
        <button class="button secondary rounded">Secondary</button>
        <button class="button accent rounded">Accent</button>
        <button class="button info rounded">Info</button>
        <button class="button success rounded">Success</button>
        <button class="button warning rounded">Warning</button>
        <button class="button danger rounded">Danger</button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button">
            <div class="icon">
                <i class="fa-solid fa-circle-chevron-down"></i>
            </div>
        </button>

        <button class="button info">
            <div class="icon">
                <i class="fa-solid fa-arrow-down"></i>
            </div>
            <span>Download</span>
        </button>
    </div>
    

    <div class="flex gap-1 items-center">
        <button class="button loading">Loading</button>
        <button class="button primary loading">Primary</button>
        <button class="button success loading">Success</button>
        <button class="button danger loading">Danger</button>

        <button class="button" disabled>Disabled</button>
        <button class="button primary" disabled>Primary</button>
        <button class="button ghost" disabled>Ghost</button>
        <button class="button link" disabled>Link</button>
    </div>