Button Component

The Button component is a flexible, accessible component that can render as either a button or a link. It supports multiple variants, sizes, and color schemes with full dark mode support.

Usage

The simplest way to use the button component:

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

Variants

The button component supports a wide range of visual variants to suit different UI contexts:

Primary Variants

<x-button variant="primary">Primary</x-button>
<x-button variant="secondary">Secondary</x-button>
<x-button variant="alternative">Alternative</x-button>
<x-button variant="inverse">Inverse</x-button>

Outline Variants

<x-button variant="outline">Outline</x-button>
<x-button variant="outline-primary">Outline Primary</x-button>
<x-button variant="outline-secondary">Outline Secondary</x-button>

Status Variants

<x-button variant="info">Info</x-button>
<x-button variant="success">Success</x-button>
<x-button variant="warning">Warning</x-button>
<x-button variant="danger">Danger</x-button>

Outline Status Variants

<x-button variant="outline-info">Outline Info</x-button>
<x-button variant="outline-success">Outline Success</x-button>
<x-button variant="outline-warning">Outline Warning</x-button>
<x-button variant="outline-danger">Outline Danger</x-button>

Ghost Variant

<x-button variant="ghost">Ghost</x-button>

Sizes

The button component supports four different sizes:

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

As Link

When you provide an href attribute, the button will render as an anchor tag:

<x-button href="/dashboard">Go to Dashboard</x-button>
<x-button href="https://example.com" target="_blank">External Link</x-button>

Go to Dashboard External Link

With Icons

You can easily include icons within buttons. The component uses flexbox with gap spacing:

<x-button>
    <x-icons.plus />
    Add New
</x-button>

<x-button variant="outline-danger">
    <x-icons.trash />
    Delete
</x-button>

Livewire Usage

You can use the button component with Livewire. Just pass the wire:click attribute to the component:

<x-button wire:click="submit">Delete</x-button>

Circle Button

The button-circle component is a special circular button variant with a plus icon, perfect for floating action buttons and add actions.

Basic Circle Button

<x-button-circle />
<x-button-circle variant="secondary" />
<x-button-circle variant="info" />

Circle Button Sizes

Circle buttons support six sizes from small to 3xl:

<x-button-circle size="sm" />
<x-button-circle size="md" />
<x-button-circle size="lg" />
<x-button-circle size="xl" />
<x-button-circle size="2xl" />
<x-button-circle size="3xl" />

Circle Button Variants

All color variants are supported:

<x-button-circle variant="primary" />
<x-button-circle variant="secondary" />
<x-button-circle variant="alternate" />
<x-button-circle variant="inverse" />
<x-button-circle variant="info" />
<x-button-circle variant="success" />
<x-button-circle variant="warning" />
<x-button-circle variant="danger" />

Props Reference

Prop	Type	Default	Description
`variant`	string	`primary`	Visual style variant. Options: `primary`, `secondary`, `alternative`, `inverse`, `outline`, `outline-primary`, `outline-secondary`, `outline-alternative`, `ghost`, `info`, `outline-info`, `danger`, `outline-danger`, `success`, `outline-success`, `warning`, `outline-warning`
`size`	string	`md`	Button size. Options: `xs`, `sm`, `md`, `lg`
`href`	string\|null	`null`	If provided, renders as an anchor tag instead of a button

Circle Button Props Reference

Prop	Type	Default	Description
`variant`	string	`primary`	Visual style variant. Options: `primary`, `secondary`, `alternate`, `inverse`, `info`, `danger`, `success`, `warning`
`size`	string	`md`	Button size. Options: `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
`href`	string\|null	`null`	If provided, renders as an anchor tag instead of a button

References

Category	Path / Name	Description
Component	resources/views/components/button.blade.php	Standard button component
Component	resources/views/components/button-circle.blade.php	Circular button with plus icon

For the detailed documentation, please visit the Penguin UI Buttons.