Button

Button component with multiple variants and sizes

Button

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

Installation

Add the button component to your project:

npx velyx add button
pnpm dlx velyx add button
yarn dlx velyx add button
bunx --bun velyx add button

Usage

Primary Button

Loading preview...

Failed to load preview

Code

Secondary Button

Loading preview...

Failed to load preview

Code

Destructive Button

Loading preview...

Failed to load preview

Code

Outline Button

Loading preview...

Failed to load preview

Code

Ghost Button

Loading preview...

Failed to load preview

Code

Sizes

Loading preview...

Failed to load preview

Code

Loading preview...

Failed to load preview

Code

With Icon

Loading preview...

Failed to load preview

Code

Loading State

Loading preview...

Failed to load preview

Code

Disabled

Loading preview...

Failed to load preview

Code

Pill Shape

Loading preview...

Failed to load preview

Code

Icon Button

Loading preview...

Failed to load preview

Code

Props

Prop Type Default Description
variant string primary Button style variant
size string md Button size (xs, sm, md, lg, xl)
type string button Button type (button, submit, reset)
disabled boolean false Disable the button
loading boolean false Show loading spinner
icon string null Icon name (left side)
iconRight string null Icon name (right side)
iconOnly boolean false Icon-only button
pill boolean false Rounded pill shape
block boolean false Full width button
href string null URL for link buttons
action string null Livewire action to target

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