Button

Buttons allow the user to take actions or make choices. Available in multiple variants, colors, and sizes with reactive state support.

Basic Examples

Buttons with various colors and variants

// Dynamic import of the Button component


const { default: Button } = await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { div } = tags;

// Various button styles
const buttons = div({ class: 'space-y-4' },
    // Colors
    div({ class: 'flex flex-wrap gap-2' },
        Button({}, 'Default'),
        Button({ color: 'primary' }, 'Primary'),
        Button({ color: 'secondary' }, 'Secondary'),
        Button({ color: 'accent' }, 'Accent')
    ),
    // Variants
    div({ class: 'flex flex-wrap gap-2' },
        Button({ color: 'primary', variant: 'outline' }, 'Outline'),
        Button({ color: 'primary', variant: 'soft' }, 'Soft'),
        Button({ color: 'ghost' }, 'Ghost'),
        Button({ color: 'link' }, 'Link')
    ),
    // Sizes
    div({ class: 'flex flex-wrap items-center gap-2' },
        Button({ color: 'primary', size: 'xs' }, 'Tiny'),
        Button({ color: 'primary', size: 'sm' }, 'Small'),
        Button({ color: 'primary' }, 'Normal'),
        Button({ color: 'primary', size: 'lg' }, 'Large')
    )
);

$('#demo').insert(buttons);

Reactive Loading State

Button with reactive loading state


const { default: Button } = await import('/components/actions/button.js');

const { signal, tags, $ } = Lightview;
const { div, span } = tags;

// Signal for loading state
const isLoading = signal(false);

// Simulate async operation
const handleClick = async () => {
    isLoading.value = true;
    await new Promise(r => setTimeout(r, 2000));
    isLoading.value = false;
};

const demo = div({ class: 'flex gap-4 items-center' },
    Button({ 
        color: 'primary',
        loading: () => isLoading.value,
        onclick: handleClick
    }, 'Save Changes'),
    span({ class: 'text-sm opacity-70' },
        () => isLoading.value ? '⏳ Saving...' : 'Click to test loading'
    )
);

$('#demo').insert(demo);

Props

Prop Type Default Description
color string - 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
variant string - 'outline' | 'soft' | 'dash' | 'wide' | 'block' | 'square' | 'circle'
disabled boolean | function false Disable the button (supports reactive function)
loading boolean | function false Show loading spinner (supports reactive function)
active boolean false Force active/pressed state
glass boolean false Glass morphism effect
noAnimation boolean false Disable click animation

Colors

Variants

Outline

Soft

Ghost & Link

Sizes

States

Special Shapes

For more examples and options, see the DaisyUI Button documentation.