Button
Primary control for any action, supporting both anchors and buttons.
<x-btn>Button</x-btn>
<x-btn>Button</x-btn>
| Attribute |
Default |
Description |
style |
primary |
string
Possible values primary, secondary, outline, ghost, success, info, warning or danger. |
size |
null |
string || null
Possible values null, sm, lg or xl. |
href |
null |
string || null
When set, renders an <a> element instead of a <button> element. |
alignment |
center |
string
Controls text alignment on the button label. Possible values left, center or right. |
disabled |
false |
bool
Whether the button is disabled. |
Control the button style by supplying the style="" attribute.
<div class="flex justify-between">
<x-btn style="primary">Button</x-btn>
<x-btn style="secondary">Button</x-btn>
<x-btn style="outline">Button</x-btn>
<x-btn style="ghost">Button</x-btn>
</div>
<div class="flex justify-between">
<x-btn style="primary">Button</x-btn>
<x-btn style="secondary">Button</x-btn>
<x-btn style="outline">Button</x-btn>
<x-btn style="ghost">Button</x-btn>
</div>
<div class="flex justify-between">
<x-btn style="success">Button</x-btn>
<x-btn style="info">Button</x-btn>
<x-btn style="warning">Button</x-btn>
<x-btn style="danger">Button</x-btn>
</div>
<div class="flex justify-between">
<x-btn style="success">Button</x-btn>
<x-btn style="info">Button</x-btn>
<x-btn style="warning">Button</x-btn>
<x-btn style="danger">Button</x-btn>
</div>
Control the button size by supplying the size="" attribute.
<div class="flex items-center justify-between space-x-2">
<x-btn size="lg">Button</x-btn>
<x-btn>Button</x-btn>
<x-btn size="sm">Button</x-btn>
</div>
<div class="flex items-center justify-between space-x-2">
<x-btn size="lg">Button</x-btn>
<x-btn>Button</x-btn>
<x-btn size="sm">Button</x-btn>
</div>
Buttons can be used as an <a> element by supplying the href="" attribute.
<div class="flex justify-center">
<x-btn href="#">Button</x-btn>
</div>
<div class="flex justify-center">
<x-btn href="#">Button</x-btn>
</div>
Both linked buttons and traditional buttons can be set to a disabled state by supplying the disabled boolean attribute.
<div class="flex justify-center">
<x-btn disabled>Button</x-btn>
</div>
<div class="flex justify-center">
<x-btn disabled>Button</x-btn>
</div>
Buttons can be prefixed or suffixed with simple text elements for additional clarity by utilizing the prefix and suffix component slots.
<div class="flex justify-between">
<x-btn>
<x-slot:prefix>
<span class="text-gray-400">1.</span>
</x-slot:prefix>
Button
</x-btn>
<x-btn>
<x-slot:prefix>
<span class="text-gray-400">1.</span>
</x-slot:prefix>
Button
<x-slot:suffix>
<span class="text-gray-400">2.</span>
</x-slot:suffix>
</x-btn>
<x-btn>
Button
<x-slot:suffix>
<span class="text-gray-400">1.</span>
</x-slot:suffix>
</x-btn>
</div>
<div class="flex justify-between">
<x-btn>
<x-slot:prefix>
<span class="text-gray-400">1.</span>
</x-slot:prefix>
Button
</x-btn>
<x-btn>
<x-slot:prefix>
<span class="text-gray-400">1.</span>
</x-slot:prefix>
Button
<x-slot:suffix>
<span class="text-gray-400">2.</span>
</x-slot:suffix>
</x-btn>
<x-btn>
Button
<x-slot:suffix>
<span class="text-gray-400">1.</span>
</x-slot:suffix>
</x-btn>
</div>