x-bt-button-icon component is a versatile button designed to hold icons, providing a compact and visually appealing way to trigger actions. It supports various sizes, colors, and states, making it suitable for different UI contexts where space is limited or where an icon-only button is preferred.Slots and Icons
You can use the button icon in two ways: passing an icon name via prop (will use the icon default set you have configured), or using the slot for full customization.
1<x-bt-button-icon blue>2AB3</x-bt-button-icon>4 5<x-bt-button-icon purple>6 <x-bt-icon name="sparkles" />7</x-bt-button-icon>8 9<x-bt-button-icon green icon="users" />Shapes
Via the rounded prop, you can adjust the button-icon shape to better fit your design needs.
Use the tailwind rounded values like sm, md, lg, full, etc.
1<x-bt-button-icon rounded="none" red icon="x-mark" />2<x-bt-button-icon rounded="sm" icon="arrow-down-tray" />3<x-bt-button-icon rounded="md" purple icon="arrow-down-tray" />4<x-bt-button-icon rounded="xl" yellow icon="bell-alert" />5<x-bt-button-icon rounded="3xl" emerald icon="beaker" />6<x-bt-button-icon rounded="full" gray icon="bars-3" />Spin
Prop spinner is activated for default when using wire:click.
1<x-bt-button-icon purple icon="cube" wire:click="spinButton" />Sizes
button-icons come in predefined sizes, but you can adjust the presets or create your own.
Use xs, sm, md, lg or xl for different button-icon sizes.
1<x-bt-button-icon orange icon="user" xs />2<x-bt-button-icon orange icon="user" sm />3<x-bt-button-icon orange icon="user" md />4<x-bt-button-icon orange icon="user" lg />5<x-bt-button-icon orange icon="user" xl />Colors
1<x-bt-button-icon beartropy icon="user" /> 2<x-bt-button-icon red icon="user" /> 3<x-bt-button-icon orange icon="user" /> 4<x-bt-button-icon amber icon="user" /> 5<x-bt-button-icon yellow icon="user" /> 6<x-bt-button-icon lime icon="user" /> 7<x-bt-button-icon green icon="user" /> 8<x-bt-button-icon emerald icon="user" /> 9<x-bt-button-icon teal icon="user" />10<x-bt-button-icon cyan icon="user" />11<x-bt-button-icon sky icon="user" />12<x-bt-button-icon blue icon="user" />13<x-bt-button-icon indigo icon="user" />14<x-bt-button-icon violet icon="user" />15<x-bt-button-icon purple icon="user" />16<x-bt-button-icon fuchsia icon="user" />17<x-bt-button-icon pink icon="user" />18<x-bt-button-icon rose icon="user" />19<x-bt-button-icon gray icon="user" />20<x-bt-button-icon zinc icon="user" />21<x-bt-button-icon slate icon="user" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
color
|
string|null
|
null
|
Color preset key for the button-icon, resolved via the
button-icon presets.Controls background, text, border, and icon colors. |
size
|
string|null
|
md
|
Size preset key for the button-icon, also resolved via
button-icon presets.Typical values include xs, sm, md, lg.If not provided, it defaults to md.
|
rounded
|
string|null
|
full
|
Border radius for the button-icon, using Tailwind CSS rounded values like
sm, md, lg, full, etc.Defaults to full for a circular appearance.
|
icon
|
string|null
|
null
|
Name of the icon to display inside the button-icon.
This uses the default icon set configured in your application. If not provided, you can use the slot to pass a custom icon component. |
href
|
string|null
|
null
|
If provided, the button-icon will render as an anchor (
<a>) element with this href.Otherwise, it renders as a button ( <button>).
|
spinner
|
bool
|
true
|
When set to
true, the button-icon will show a loading spinner when a Livewire action is in progress. |