Icon Button

Compact circular and square icon triggers powered by Lucide icons for toolbars, list controls, and quick actions.

Component Syntax

blade

<x-aura::icon-button icon="pencil" variant="subtle" size="md" label="Edit" />

1. Icon Button Variants

blade

<x-aura::icon-button icon="pencil" variant="primary" label="Edit" />

<x-aura::icon-button icon="eye" variant="secondary" label="View" />

<x-aura::icon-button icon="heart" variant="subtle" label="Favorite" />

<x-aura::icon-button icon="settings" variant="outline" label="Settings" />

<x-aura::icon-button icon="share-2" variant="ghost" label="Share" />

<x-aura::icon-button icon="trash-2" variant="danger" label="Delete" />

2. Shapes (Circle vs Square)

blade

<x-aura::icon-button icon="pencil" variant="primary" shape="circle" label="Edit" />

<x-aura::icon-button icon="eye" variant="secondary" shape="circle" label="View" />

<x-aura::icon-button icon="bookmark" variant="subtle" shape="circle" label="Bookmark" />

<x-aura::icon-button icon="trash-2" variant="danger" shape="circle" label="Delete" />

<x-aura::icon-button icon="pencil" variant="primary" shape="square" label="Edit" />

<x-aura::icon-button icon="eye" variant="secondary" shape="square" label="View" />

<x-aura::icon-button icon="bookmark" variant="subtle" shape="square" label="Bookmark" />

<x-aura::icon-button icon="trash-2" variant="danger" shape="square" label="Delete" />

3. Proportional Sizes

blade

<x-aura::icon-button icon="bell" size="xs" variant="secondary" label="Alert" />

<x-aura::icon-button icon="bell" size="sm" variant="secondary" label="Alert" />

<x-aura::icon-button icon="bell" size="md" variant="secondary" label="Alert" />

<x-aura::icon-button icon="bell" size="lg" variant="secondary" label="Alert" />

<x-aura::icon-button icon="bell" size="xl" variant="secondary" label="Alert" />

4. Real World Action Card Pattern

blade

Alex Kovacs

alex@example.com

<x-aura::card size="2xl" gap="4">

    <x-aura::flex align="center" justify="between">

        <x-aura::flex direction="col" align="start" gap="1">

            <x-aura::heading level="3" size="sm">
                Alex Kovacs
            </x-aura::heading>

            <x-aura::text size="sm" variant="subtle">
                alex@example.com
            </x-aura::text>

        </x-aura::flex>

        <x-aura::flex align="center" gap="2">

            <x-aura::icon-button icon="eye" variant="ghost" size="sm" label="View" />

            <x-aura::icon-button icon="pencil" variant="ghost" size="sm" label="Edit" />

            <x-aura::icon-button icon="trash-2" variant="danger" size="sm" label="Delete" />

        </x-aura::flex>

    </x-aura::flex>

</x-aura::card>

Component Props

Available properties and configurations for the icon button component.

Prop	Default	Available Values
icon	null	Icon name string
variant	secondary	primary secondary filled subtle outline ghost danger
size	md	xs sm md lg xl
shape	square	square circle
type	button	button submit reset
label	null	Label string
href	null	URL link string
disabled	false	true false
loading	null	true false Livewire target string

Aura Wire

Component Library

Icon Button

Component Syntax

1. Icon Button Variants

2. Shapes (Circle vs Square)

3. Proportional Sizes

4. Real World Action Card Pattern

Alex Kovacs

Component Props

Button

Group

Aura Wire