<x-bt-button-icon />
Customize via presets →
Basic Usage
1<x-bt-button-icon icon="plus" />2<x-bt-button-icon icon="heart" red />3<x-bt-button-icon icon="envelope" blue />Colors
Set the color with a magic attribute. The default is beartropy. Unlike the regular button, icon buttons have a flat color style (no variants).
1<x-bt-button-icon beartropy icon="star" />2<x-bt-button-icon blue icon="star" />3<x-bt-button-icon red icon="star" />4<x-bt-button-icon green icon="star" />5<x-bt-button-icon purple icon="star" />6<x-bt-button-icon orange icon="star" />All available colors
beartropy, red, orange, amber, yellow,
lime, green, emerald, teal, cyan,
sky, blue, indigo, violet, purple,
fuchsia, pink, rose, gray, slate,
stone, zinc, neutral.
Dynamic colors
color prop:<x-bt-button-icon :color="$dynamicColor" icon="star" />
Sizes
Five preset sizes. Both the button and the inner icon scale together.
1<x-bt-button-icon xs orange icon="user" />2<x-bt-button-icon sm orange icon="user" />3<x-bt-button-icon orange icon="user" />4<x-bt-button-icon lg orange icon="user" />5<x-bt-button-icon xl orange icon="user" />Rounded
Control the border radius with the rounded prop. Accepts any Tailwind rounded suffix. Defaults to full (circle).
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" />Custom Slot Content
Pass custom content instead of an icon via the default slot. Useful for text badges, custom SVGs, or other components.
1<x-bt-button-icon blue>2 <span class="text-sm font-bold">A</span>3</x-bt-button-icon>4<x-bt-button-icon purple>5 <x-bt-icon name="sparkles" />6</x-bt-button-icon>7<x-bt-button-icon red>8 <span class="text-xs font-bold">99</span>9</x-bt-button-icon>Link Mode
Pass href to render as an <a> tag instead of <button>.
Disabled State
1<x-bt-button-icon disabled icon="plus" />2<x-bt-button-icon disabled icon="trash" red />Accessibility
The label prop renders as aria-label for screen readers. The default label is "New". Always set a descriptive label for icon-only buttons.
1<x-bt-button-icon icon="trash" red label="Delete item" />2<x-bt-button-icon icon="pencil" blue label="Edit post" />3<x-bt-button-icon icon="star" green aria-label="Add to favorites" />Livewire Integration
The spinner is enabled by default. When wire:click is present, a spinner replaces the icon during loading.
Spinner
Click the button to see the spinner replace the icon.
1<x-bt-button-icon purple icon="cube" wire:click="spinButton" />2<x-bt-button-icon green icon="check" wire:click="spinButton" />3<x-bt-button-icon red icon="trash" wire:click="spinButton" />Disable Spinner
Set :spinner="false" to suppress the loading indicator.
1<x-bt-button-icon :spinner="false" wire:click="spinButton" icon="check" blue />2<x-bt-button-icon wire:click="spinButton" icon="check" blue />Real-World Example
A toolbar with icon-only actions for a rich text editor.
1<div class="inline-flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1.5 dark:border-slate-700 dark:bg-slate-800">2 <x-bt-button-icon sm icon="bold" gray rounded="lg" label="Bold" />3 <x-bt-button-icon sm icon="italic" gray rounded="lg" label="Italic" />4 <x-bt-button-icon sm icon="underline" gray rounded="lg" label="Underline" />5 <div class="mx-1 h-5 w-px bg-slate-300 dark:bg-slate-600"></div>6 <x-bt-button-icon sm icon="list-bullet" gray rounded="lg" label="Bullet list" />7 <x-bt-button-icon sm icon="link" gray rounded="lg" label="Insert link" />8 <x-bt-button-icon sm icon="photo" gray rounded="lg" label="Insert image" />9</div>Slots
| Slot | Description |
|---|---|
default
|
Custom content replacing the icon. Use for text badges, custom SVGs, or other components.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon
|
string|null
|
plus
|
Icon name (Heroicons by default). Overridden when using the default slot.
|
label
|
string|null
|
New
|
Accessible label rendered as
aria-label. Not displayed visually.
|
color
|
string|null
|
config default
|
Color preset name. Use magic attributes (
red, blue, etc.) or the color prop for dynamic values.
|
size
|
string|null
|
md
|
Size preset:
xs, sm, md, lg, xl.
|
rounded
|
string|null
|
full
|
Border radius suffix. Accepts any Tailwind rounded value:
none, sm, md, lg, xl, 3xl, full.
|
spinner
|
bool
|
true
|
Show a loading spinner during Livewire actions. Set
false to disable.
|
href
|
string|null
|
null
|
Renders as an
<a> tag instead of <button>.
|
disabled
|
bool
|
false
|
Disables the button and applies muted styling.
|
iconSet
|
string|null
|
config default
|
Icon set override:
heroicons, lucide, fontawesome.
|
iconVariant
|
string|null
|
config default
|
Icon variant override:
outline, solid (Heroicons only).
|