Button

Displays a button.

Component Code 
<x-aui::button>Button</x-aui::button>

Button Link

The examples below also work with the button link component, which just uses an a tag under the hood

Button
Component Code 
<x-aui::button-link href="https://x.com/yungifez">Button</x-aui::button-link>

Variant examples

The button component comes in multiple variants

Default

Component Code 
<x-aui::button>Button</x-aui::button>

Secondary

Component Code 
<x-aui::button variant="secondary">Button</x-aui::button>

Destructive

Component Code 
<x-aui::button variant="destructive">Button</x-aui::button>

Outline

Component Code 
<x-aui::button variant="outline">Button</x-aui::button>

Ghost

Component Code 
<x-aui::button variant="ghost">Button</x-aui::button>

Link

Component Code 
<x-aui::button variant="link">Button</x-aui::button>

You can also use the none variant and style the button yourself

Size examples

The button component comes in multiple sizes

Default

Component Code 
<x-aui::button>Button</x-aui::button>

Icon

Component Code 
<x-aui::button size="icon" class="justify-center" variant="outline">
    <i class="fas fa-angle-right"></i>
</x-aui::button>

Small

Component Code 
<x-aui::button size="sm">Button</x-aui::button>

Large

Component Code 
<x-aui::button size="lg" variant="outline">
    <i class="far fa-envelope mr-2"></i>
    Login with Email
</x-aui::button>