Logo Beartropy

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).
blade 
            
 1/*Start slot*/
 2<x-button accent outline>
 3    <x-slot name="start">
 4        <img src="{{ asset('bear.svg') }}" class="h-6 mr-2 scale-x-[-1]" alt="Beartropy Logo">
 5    </x-slot>
 6    Bear
 7</x-button>
 8 
 9/*End slot*/
10<x-button accent outline>
11    <x-slot name="end">
12        <img src="{{ asset('bear.svg') }}" class="h-6 ml-2" alt="Beartropy Logo">
13    </x-slot>
14    Tropy
15</x-button>
16 
17/*Icon prop*/
18<x-button green solid icon-end="check">
19    Confirm
20</x-button>
21 
22/*Icon prop right*/
23<x-button neutral solid icon-start="x-mark">
24    Cancel
25</x-button>

Button as a tag

Use href to make the button a link (renders as <a>).
Laravel.com
blade 
            
1<x-button href="https://laravel.com" target="_blank" accent outline>Laravel.com</x-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.
blade 
            
1<x-button orange solid wire:click="spinButtons">Spin me!</x-button>
2<x-button emerald outline wire:click="spinButtons">Spin me!</x-button>
3<x-button cyan ghost wire:click="spinButtons">Spin me!</x-button>
4<x-button lime tint wire:click="spinButtons">Spin me!</x-button>
5<x-button sky gradient wire:click="spinButtons">Spin me!</x-button>

Size and padding

Preset sizes are available and customizable. You can adjust or create your own presets for size and padding.
blade 
            
1<x-button tint orange size="xs">xs</x-button>
2<x-button tint orange size="sm">sm</x-button>
3<x-button tint orange size="md">md</x-button>
4<x-button tint orange size="lg">lg</x-button>
5<x-button tint orange size="xl">xl</x-button>

Colors and Variants

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

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

Soft variations

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

Outline variations

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

Ghost variations

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

Tint variations

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

Glass variations

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

Gradient variations

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