Button

Buttons allow users to perform actions or navigate with a single click.

Installation

Add the button component to your project:

npx velyx@latest add button

pnpm dlx velyx@latest add button

yarn dlx velyx@latest add button

bunx --bun velyx@latest add button

Usage

Primary Button

    Click me

Secondary Button

    Secondary

Destructive Button

    Delete

Outline Button

    Outline

Ghost Button

    Ghost

Sizes

    Small

    Large

With Icon

    Click me

Loading State

    Loading...

Disabled

    Disabled

Pill Shape

    Pill Button

Icon Button

Props

Variants

• default - Default styling
• primary - Primary action button
• secondary - Secondary action button
• outline - Outlined button
• ghost - Minimal styling, hover only
• destructive - Dangerous action (delete, remove)

Sizes

• sm - Small button
• default - Default size
• lg - Large button
• icon - Square button for icons

Examples

Submit Form

<form method="POST" action="/submit">
    @csrf
    <x-button type="submit">Submit</x-button>
</form>

Link Button

<a href="{{ route('dashboard') }}">
    <x-button>Go to Dashboard</x-button>
</a>

Disabled State

<x-button disabled>
    Disabled
</x-button>

Full Width

<x-button class="w-full">
    Full Width Button
</x-button>

Customization

The button component uses Tailwind CSS classes. You can customize the appearance by modifying the component in your project:

@

@props([
    'variant' => 'primary',
    'size' => 'md',
    // ... other props
])

@php
$variantClasses = match($variant) {
    'primary' => 'bg-primary text-primary-foreground hover:bg-primary/90',
    'secondary' => 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
    // ... customize variants here
};
@endphp

<button {{ $attributes->class([$variantClasses]) }}>
    {{ $slot }}
</button>

Accessibility

Buttons include proper ARIA attributes and keyboard support:

• Tab - Focus button
• Enter/Space - Activate button
• Disabled state - Automatically applied

Next Steps

• Explore Card component
• Learn about Input component
• View Dialog component