Velyx

Button

Button

Buttons allow users to perform actions and make choices. They're used to trigger events, navigate pages, or submit forms.

Installation

The button component is available as a Blade component at resources/views/components/ui/button.blade.php.

Usage

Basic Button

<x-ui.button>Click me</x-ui.button>

Variants

Choose from multiple visual styles:

<x-ui.button variant="primary">Primary</x-ui.button>
<x-ui.button variant="secondary">Secondary</x-ui.button>
<x-ui.button variant="outline">Outline</x-ui.button>
<x-ui.button variant="ghost">Ghost</x-ui.button>
<x-ui.button variant="link">Link</x-ui.button>
<x-ui.button variant="destructive">Destructive</x-ui.button>

Sizes

Control the button size:

<x-ui.button size="xs">Extra Small</x-ui.button>
<x-ui.button size="sm">Small</x-ui.button>
<x-ui.button size="md">Medium</x-ui.button>
<x-ui.button size="lg">Large</x-ui.button>
<x-ui.button size="xl">Extra Large</x-ui.button>

With Icons

Add icons to buttons:

<!-- Left icon -->
<x-ui.button icon="save">Save</x-ui.button>

<!-- Right icon -->
<x-ui.button iconRight="arrow-right">Continue</x-ui.button>

<!-- Icon only -->
<x-ui.button icon="settings" iconOnly="true" title="Settings" />

Pill Shape

Make buttons fully rounded:

<x-ui.button pill>Sign Up</x-ui.button>

Block/Full Width

Full-width buttons for mobile:

<x-ui.button block>Full Width</x-ui.button>

As Link

Render as an anchor tag:

<x-ui.button href="/docs" variant="outline">
  Read Docs
</x-ui.button>

Disabled State

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

Loading State

Works with Livewire loading states:

<x-ui.button action="save">
  Save Changes
</x-ui.button>

<!-- Manual loading -->
<x-ui.button loading="true">
  Processing...
</x-ui.button>

Props

Prop Type Default Description
variant string 'primary' Visual style: primary, secondary, outline, ghost, link, destructive
size string 'md' Size: xs, sm, md, lg, xl
icon string null Lucide icon name (left side)
iconRight string null Lucide icon name (right side)
iconOnly bool false Show only the icon
pill bool false Fully rounded corners
block bool false Full width
href string null Render as link instead of button
type string 'button' Button type: button, submit, reset
disabled bool false Disabled state
loading bool false Show loading spinner
action string null Livewire action name for loading state

Examples

Button Group

<div class="flex gap-2">
  <x-ui.button>Cancel</x-ui.button>
  <x-ui.button variant="primary">Confirm</x-ui.button>
</div>

Icon Actions

<div class="flex gap-2">
  <x-ui.button variant="ghost" icon="edit" iconOnly size="sm" title="Edit" />
  <x-ui.button variant="ghost" icon="trash-2" iconOnly size="sm" title="Delete" />
  <x-ui.button variant="ghost" icon="more-vertical" iconOnly size="sm" title="More" />
</div>

Confirmation Actions

<div class="flex items-center justify-between p-4 border rounded-lg">
  <div>
    <h3 class="font-semibold">Delete account?</h3>
    <p class="text-sm text-muted-foreground">This action cannot be undone.</p>
  </div>
  <div class="flex gap-2">
    <x-ui.button variant="outline">Cancel</x-ui.button>
    <x-ui.button variant="destructive">Delete</x-ui.button>
  </div>
</div>

Accessibility

Buttons include proper ARIA attributes:

  • aria-disabled for disabled buttons
  • Screen reader text for icon-only buttons
  • Proper focus indicators
  • Keyboard support (Enter/Space to activate)

Best Practices

  • Use descriptive button text
  • Provide title attribute for icon-only buttons
  • Don't use buttons for navigation (use links instead)
  • Group related buttons logically

Styling

Customize button styles using CSS variables:

:root {
    --primary: oklch(0.5 0.2 250);
    --primary-foreground: oklch(0.98 0 0);
}

Related Components