Logo Beartropy UI
Buttons
The button component is a versatile and customizable button for any context. It supports different colors, sizes, and variants.
You can fully customize colors, sizes, and variants to match your project’s design.
Here are examples of usage.
You can customize this component

Slots and Icons

The button has two slots: start and end for adding content before or after the text and icons.
You can also use the icon prop to add an icon (left by default, or right with icon-position). 

 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    Tropy
12</x-bt-button>
13<x-bt-button green soft icon-start="check">
14    Confirm
15</x-bt-button>
16<x-bt-button neutral soft icon-end="x-mark">
17    Cancel
18</x-bt-button>

Different Icon Sets

You can use icons from different sets by specifying the icon-set prop.
Currently supported sets are 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>

Button as a tag

Use href to make the button a link (renders as <a>).

Laravel.com 
1<x-bt-button href="https://laravel.com" target="_blank" accent outline>Laravel.com</x-bt-button>

Spinner

Any button with wire:click will automatically show a spinner when the action is processing.
Customize spinner classes via button-spinner-class if needed. 

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>

Size and padding

Preset sizes are available and customizable. You can adjust or create your own presets for size and padding. 

1<x-bt-button tint orange size="xs">xs</x-bt-button>
2<x-bt-button tint orange size="sm">sm</x-bt-button>
3<x-bt-button tint orange size="md">md</x-bt-button>
4<x-bt-button tint orange size="lg">lg</x-bt-button>
5<x-bt-button tint orange size="xl">xl</x-bt-button>

Colors and Variants

The button component supports all classic color and variant combinations. Both are fully customizable via presets.
Add your own colors and variants to fit your needs!

Solid variations 

 1<x-bt-button solid beartropy>Beartropy</x-bt-button>
 2<x-bt-button solid amber>Amber</x-bt-button>
 3<x-bt-button solid blue>Blue</x-bt-button>
 4<x-bt-button solid cyan>Cyan</x-bt-button>
 5<x-bt-button solid emerald>Emerald</x-bt-button>
 6<x-bt-button solid green>Green</x-bt-button>
 7<x-bt-button solid indigo>Indigo</x-bt-button>
 8<x-bt-button solid lime>Lime</x-bt-button>
 9<x-bt-button solid neutral>Neutral</x-bt-button>
10<x-bt-button solid orange>Orange</x-bt-button>
11<x-bt-button solid pink>Pink</x-bt-button>
12<x-bt-button solid purple>Purple</x-bt-button>
13<x-bt-button solid red>Red</x-bt-button>
14<x-bt-button solid rose>Rose</x-bt-button>
15<x-bt-button solid sky>Sky</x-bt-button>
16<x-bt-button solid teal>Teal</x-bt-button>
17<x-bt-button solid violet>Violet</x-bt-button>
18<x-bt-button solid yellow>Yellow</x-bt-button>

Soft variations 

 1<x-bt-button soft beartropy>Beartropy</x-bt-button>
 2<x-bt-button soft amber>Amber</x-bt-button>
 3<x-bt-button soft blue>Blue</x-bt-button>
 4<x-bt-button soft cyan>Cyan</x-bt-button>
 5<x-bt-button soft emerald>Emerald</x-bt-button>
 6<x-bt-button soft green>Green</x-bt-button>
 7<x-bt-button soft indigo>Indigo</x-bt-button>
 8<x-bt-button soft lime>Lime</x-bt-button>
 9<x-bt-button soft neutral>Neutral</x-bt-button>
10<x-bt-button soft orange>Orange</x-bt-button>
11<x-bt-button soft pink>Pink</x-bt-button>
12<x-bt-button soft purple>Purple</x-bt-button>
13<x-bt-button soft red>Red</x-bt-button>
14<x-bt-button soft rose>Rose</x-bt-button>
15<x-bt-button soft sky>Sky</x-bt-button>
16<x-bt-button soft teal>Teal</x-bt-button>
17<x-bt-button soft violet>Violet</x-bt-button>
18<x-bt-button soft yellow>Yellow</x-bt-button>

Outline variations 

 1<x-bt-button outline beartropy>Beartropy</x-bt-button>
 2<x-bt-button outline amber>Amber</x-bt-button>
 3<x-bt-button outline blue>Blue</x-bt-button>
 4<x-bt-button outline cyan>Cyan</x-bt-button>
 5<x-bt-button outline emerald>Emerald</x-bt-button>
 6<x-bt-button outline green>Green</x-bt-button>
 7<x-bt-button outline indigo>Indigo</x-bt-button>
 8<x-bt-button outline lime>Lime</x-bt-button>
 9<x-bt-button outline neutral>Neutral</x-bt-button>
10<x-bt-button outline orange>Orange</x-bt-button>
11<x-bt-button outline pink>Pink</x-bt-button>
12<x-bt-button outline purple>Purple</x-bt-button>
13<x-bt-button outline red>Red</x-bt-button>
14<x-bt-button outline rose>Rose</x-bt-button>
15<x-bt-button outline sky>Sky</x-bt-button>
16<x-bt-button outline teal>Teal</x-bt-button>
17<x-bt-button outline violet>Violet</x-bt-button>
18<x-bt-button outline yellow>Yellow</x-bt-button>

Ghost variations 

 1<x-bt-button ghost beartropy>Beartropy</x-bt-button>
 2<x-bt-button ghost amber>Amber</x-bt-button>
 3<x-bt-button ghost blue>Blue</x-bt-button>
 4<x-bt-button ghost cyan>Cyan</x-bt-button>
 5<x-bt-button ghost emerald>Emerald</x-bt-button>
 6<x-bt-button ghost green>Green</x-bt-button>
 7<x-bt-button ghost indigo>Indigo</x-bt-button>
 8<x-bt-button ghost lime>Lime</x-bt-button>
 9<x-bt-button ghost neutral>Neutral</x-bt-button>
10<x-bt-button ghost orange>Orange</x-bt-button>
11<x-bt-button ghost pink>Pink</x-bt-button>
12<x-bt-button ghost purple>Purple</x-bt-button>
13<x-bt-button ghost red>Red</x-bt-button>
14<x-bt-button ghost rose>Rose</x-bt-button>
15<x-bt-button ghost sky>Sky</x-bt-button>
16<x-bt-button ghost teal>Teal</x-bt-button>
17<x-bt-button ghost violet>Violet</x-bt-button>
18<x-bt-button ghost yellow>Yellow</x-bt-button>

Tint variations 

 1<x-bt-button tint beartropy>Beartropy</x-bt-button>
 2<x-bt-button tint amber>Amber</x-bt-button>
 3<x-bt-button tint blue>Blue</x-bt-button>
 4<x-bt-button tint cyan>Cyan</x-bt-button>
 5<x-bt-button tint emerald>Emerald</x-bt-button>
 6<x-bt-button tint green>Green</x-bt-button>
 7<x-bt-button tint indigo>Indigo</x-bt-button>
 8<x-bt-button tint lime>Lime</x-bt-button>
 9<x-bt-button tint neutral>Neutral</x-bt-button>
10<x-bt-button tint orange>Orange</x-bt-button>
11<x-bt-button tint pink>Pink</x-bt-button>
12<x-bt-button tint purple>Purple</x-bt-button>
13<x-bt-button tint red>Red</x-bt-button>
14<x-bt-button tint rose>Rose</x-bt-button>
15<x-bt-button tint sky>Sky</x-bt-button>
16<x-bt-button tint teal>Teal</x-bt-button>
17<x-bt-button tint violet>Violet</x-bt-button>
18<x-bt-button tint yellow>Yellow</x-bt-button>

Glass variations 

 1<x-bt-button glass beartropy>Beartropy</x-bt-button>
 2<x-bt-button glass amber>Amber</x-bt-button>
 3<x-bt-button glass blue>Blue</x-bt-button>
 4<x-bt-button glass cyan>Cyan</x-bt-button>
 5<x-bt-button glass emerald>Emerald</x-bt-button>
 6<x-bt-button glass green>Green</x-bt-button>
 7<x-bt-button glass indigo>Indigo</x-bt-button>
 8<x-bt-button glass lime>Lime</x-bt-button>
 9<x-bt-button glass neutral>Neutral</x-bt-button>
10<x-bt-button glass orange>Orange</x-bt-button>
11<x-bt-button glass pink>Pink</x-bt-button>
12<x-bt-button glass purple>Purple</x-bt-button>
13<x-bt-button glass red>Red</x-bt-button>
14<x-bt-button glass rose>Rose</x-bt-button>
15<x-bt-button glass sky>Sky</x-bt-button>
16<x-bt-button glass teal>Teal</x-bt-button>
17<x-bt-button glass violet>Violet</x-bt-button>
18<x-bt-button glass yellow>Yellow</x-bt-button>

Gradient variations 

 1<x-bt-button gradient beartropy>Beartropy</x-bt-button>
 2<x-bt-button gradient amber>Amber</x-bt-button>
 3<x-bt-button gradient blue>Blue</x-bt-button>
 4<x-bt-button gradient cyan>Cyan</x-bt-button>
 5<x-bt-button gradient emerald>Emerald</x-bt-button>
 6<x-bt-button gradient green>Green</x-bt-button>
 7<x-bt-button gradient indigo>Indigo</x-bt-button>
 8<x-bt-button gradient lime>Lime</x-bt-button>
 9<x-bt-button gradient neutral>Neutral</x-bt-button>
10<x-bt-button gradient orange>Orange</x-bt-button>
11<x-bt-button gradient pink>Pink</x-bt-button>
12<x-bt-button gradient purple>Purple</x-bt-button>
13<x-bt-button gradient red>Red</x-bt-button>
14<x-bt-button gradient rose>Rose</x-bt-button>
15<x-bt-button gradient sky>Sky</x-bt-button>
16<x-bt-button gradient teal>Teal</x-bt-button>
17<x-bt-button gradient violet>Violet</x-bt-button>
18<x-bt-button gradient yellow>Yellow</x-bt-button>

Props

Prop Type Default Description
type
string null
Button type when rendered as a <button> element (button, submit, etc). If null, the browser default is used.
href
string null
If set, the component renders as an <a> tag instead of a <button>, using this value as the href.
disabled
bool false
Disables the button/link and applies the disabled styling preset.
iconStart
string null
Name of the icon (Beartropy preset) to display before the main content.
iconEnd
string null
Name of the icon (Beartropy preset) to display after the main content.
iconVariant
string null
Allows overriding the variant of the icons (outline, solid, etc) if using a set that supports variants.
iconSet
string null
Allows overriding the icon set (heroicons, tabler, etc) for the button icons.
label
string null
Logical label for the button (useful for accessibility or when the slot is not the primary text).
spinner
bool true
When true and a wire:target exists, shows a centered loading spinner during wire:loading.
slot
slot null
Main button content. Rendered inside the button element.
start
slot null
Optional slot displayed before iconStart and before the main text.
end
slot null
Optional slot displayed after the main text and iconEnd.
Code highlighting provided by Torchlight