<x-bt-button />
Customize via presets →
Basic Usage
1<x-bt-button>Click me</x-bt-button>2<x-bt-button blue>Blue</x-bt-button>3<x-bt-button icon-start="check" green>Confirm</x-bt-button>Label Prop
Use the label prop as an alternative to slot content. Useful for dynamic text or self-closing tags.
1<x-bt-button label="Save" green solid />2<x-bt-button label="Cancel" neutral ghost />Variants
Set the visual style using a magic attribute. All 7 variants work with every color.
1<x-bt-button solid blue>Solid</x-bt-button>2<x-bt-button soft blue>Soft</x-bt-button>3<x-bt-button outline blue>Outline</x-bt-button>4<x-bt-button ghost blue>Ghost</x-bt-button>5<x-bt-button tint blue>Tint</x-bt-button>6<x-bt-button glass blue>Glass</x-bt-button>7<x-bt-button gradient blue>Gradient</x-bt-button>Mixing Variant + Color
Combine any variant with any color freely.
1<x-bt-button soft red>Soft Red</x-bt-button>2<x-bt-button outline green>Outline Green</x-bt-button>3<x-bt-button ghost purple>Ghost Purple</x-bt-button>4<x-bt-button gradient orange>Gradient Orange</x-bt-button>5<x-bt-button glass teal>Glass Teal</x-bt-button>6<x-bt-button tint pink>Tint Pink</x-bt-button>Colors
Use any of the 24 named colors as a magic attribute. The default color is beartropy.
1<x-bt-button solid beartropy>Beartropy</x-bt-button>2<x-bt-button solid blue>Blue</x-bt-button>3<x-bt-button solid red>Red</x-bt-button>4<x-bt-button solid green>Green</x-bt-button>5<x-bt-button solid purple>Purple</x-bt-button>6<x-bt-button solid orange>Orange</x-bt-button>All available colors
beartropy, red, blue, green, yellow,
purple, pink, gray, orange, amber,
lime, emerald, teal, cyan, sky,
indigo, violet, rose, fuchsia, slate,
stone, zinc, neutral.
Dynamic colors
color prop:<x-bt-button :color="$dynamicColor">Dynamic</x-bt-button>
Sizes
Five preset sizes from extra small to extra large.
1<x-bt-button xs tint orange>Extra Small</x-bt-button>2<x-bt-button sm tint orange>Small</x-bt-button>3<x-bt-button tint orange>Medium (default)</x-bt-button>4<x-bt-button lg tint orange>Large</x-bt-button>5<x-bt-button xl tint orange>Extra Large</x-bt-button>Icons
Add icons before or after the label using Heroicons (default), Lucide, or FontAwesome.
Icon Position
1<x-bt-button icon-start="envelope" soft>Send Email</x-bt-button>2<x-bt-button icon-end="arrow-right" soft>Next</x-bt-button>3<x-bt-button icon-start="cloud-arrow-up" icon-end="check" soft>Upload</x-bt-button>Different Icon Sets
Use icon-set to switch between heroicons (default), lucide, and fontawesome.
1<x-bt-button soft icon-start="user" icon-set="lucide">Lucide User</x-bt-button>2<x-bt-button soft icon-start="fa-solid fa-user" icon-set="fontawesome">FontAwesome User</x-bt-button>Icon Variant (Heroicons)
Heroicons support outline and solid variants. Use icon-variant to override the default.
1<x-bt-button soft icon-start="heart" icon-variant="outline">Outline Heart</x-bt-button>2<x-bt-button soft icon-start="heart" icon-variant="solid">Solid Heart</x-bt-button>Custom Slot Content
Use the start and end slots for custom content before or after the label.
1<x-bt-button teal soft> 2 <x-slot name="start"> 3 <img src="{{ asset('images/beartropy_isologo.svg') }}" class="h-6 mr-2 scale-x-[-1]" alt="Beartropy Logo"> 4 </x-slot> 5 Bear 6</x-bt-button> 7<x-bt-button teal soft> 8 <x-slot name="end"> 9 <img src="{{ asset('images/beartropy_isologo.svg') }}" class="h-6 ml-2" alt="Beartropy Logo">10 </x-slot>11 Tropy12</x-bt-button>Link Button
Use href to render the button as an <a> tag. All variants, colors, and sizes work the same.
1<x-bt-button href="https://laravel.com" target="_blank" beartropy outline>Laravel.com</x-bt-button>2<x-bt-button href="/dashboard" blue>Dashboard</x-bt-button>Button Type
Set the HTML type attribute for form behavior: submit, reset, or button.
1<form class="flex items-center gap-3">2 <x-bt-button type="submit" solid green>Submit</x-bt-button>3 <x-bt-button type="reset" outline neutral>Reset</x-bt-button>4 <x-bt-button type="button" ghost>Button (default)</x-bt-button>5</form>Disabled State
Disabled buttons apply muted opacity and prevent interaction. Works on all variants.
1<x-bt-button disabled>Disabled</x-bt-button>2<x-bt-button disabled blue solid>Disabled Blue</x-bt-button>3<x-bt-button disabled outline red>Disabled Outline</x-bt-button>Livewire Integration
Buttons automatically detect wire:click and show a loading spinner. The button is disabled while the action runs.
Spinner
Click any button to see the spinner in action. The spinner replaces the button content during loading.
1<x-bt-button orange solid wire:click="spinButtons">Spin me!</x-bt-button>2<x-bt-button emerald outline wire:click="spinButtons">Spin me!</x-bt-button>3<x-bt-button cyan ghost wire:click="spinButtons">Spin me!</x-bt-button>4<x-bt-button lime tint wire:click="spinButtons">Spin me!</x-bt-button>5<x-bt-button sky gradient wire:click="spinButtons">Spin me!</x-bt-button>Disable Spinner
Set :spinner="false" to suppress the loading indicator while keeping the Livewire action.
1<x-bt-button wire:click="spinButtons" :spinner="false" blue solid>No Spinner</x-bt-button>2<x-bt-button wire:click="spinButtons" blue solid>With Spinner</x-bt-button>Custom Loading Target
Use wire:target to specify which Livewire actions trigger the spinner. Accepts comma-separated method names.
1<x-bt-button wire:click="spinButtons" wire:target="spinButtons,validate" green solid>Save</x-bt-button>Real-World Example
A typical action bar combining save, delete, and cancel buttons.
1<div class="flex items-center gap-3">2 <x-bt-button solid green icon-start="check" wire:click="spinButtons">Save Changes</x-bt-button>3 <x-bt-button outline red icon-start="trash" wire:click="spinButtons">Delete</x-bt-button>4 <x-bt-button ghost neutral>Cancel</x-bt-button>5</div>Configuration
Override the default color and size globally in your config or .env.
Config File
1// config/beartropyui.php2'component_defaults' => [3 'button' => [4 'color' => env('BEARTROPY_UI_BUTTON_COLOR', 'beartropy'),5 'size' => env('BEARTROPY_UI_BUTTON_SIZE', 'md'),6 ],7],Environment Variables
1BEARTROPY_UI_BUTTON_COLOR=blue2BEARTROPY_UI_BUTTON_SIZE=smSlots
| Slot | Description |
|---|---|
default
|
Main button content. Rendered inside the button element.
|
start
|
Custom content displayed before
icon-start and the main text.
|
end
|
Custom content displayed after the main text and
icon-end.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Button text (alternative to slot content). Useful with self-closing tags.
|
type
|
string|null
|
null
|
HTML button type:
button, submit, reset.
|
href
|
string|null
|
null
|
Renders as an
<a> tag instead of <button>.
|
disabled
|
bool
|
false
|
Disables the button and applies the disabled styling preset.
|
iconStart
|
string|null
|
null
|
Icon name displayed before the main content.
|
iconEnd
|
string|null
|
null
|
Icon name displayed after the main content.
|
iconSet
|
string|null
|
config default
|
Icon set override:
heroicons, lucide, fontawesome.
|
iconVariant
|
string|null
|
config default
|
Icon variant override:
outline, solid (Heroicons only).
|
spinner
|
bool
|
true
|
Show loading spinner during Livewire actions. Set
false to disable.
|
color
|
string|null
|
config default
|
Color preset name. Use for dynamic colors:
:color="$var".
|
size
|
string|null
|
md
|
Size preset:
xs, sm, md, lg, xl.
|