跳到主要内容
版本：Next

Icon button Blade component

Introduction​

The button component is used to render a clickable button that can perform an action:

<x-filament::icon-button
    icon="heroicon-m-plus"
    wire:click="openNewUserModal"
    label="New label"
/>
Icon buttons

By default, an icon button's underlying HTML tag is <button>. You can change it to be an <a> tag by using the tag attribute:

<x-filament::icon-button
    icon="heroicon-m-arrow-top-right-on-square"
    href="https://filamentphp.com"
    tag="a"
    label="Filament"
/>

Setting the size of an icon button​

By default, the size of an icon button is "medium". You can make it "extra small", "small", "large" or "extra large" by using the size attribute:

<x-filament::icon-button
    icon="heroicon-m-plus"
    size="xs"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-m-plus"
    size="sm"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-s-plus"
    size="lg"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-s-plus"
    size="xl"
    label="New label"
/>
Icon buttons in different sizes

Changing the color of an icon button​

By default, the color of an icon button is "primary". You can change it to be danger, gray, info, success or warning by using the color attribute:

<x-filament::icon-button
    icon="heroicon-m-plus"
    color="danger"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-m-plus"
    color="gray"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-m-plus"
    color="info"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-m-plus"
    color="success"
    label="New label"
/>

<x-filament::icon-button
    icon="heroicon-m-plus"
    color="warning"
    label="New label"
/>
Icon buttons in different colors

Adding a tooltip to an icon button​

You can add a tooltip to an icon button by using the tooltip attribute:

<x-filament::icon-button
    icon="heroicon-m-plus"
    tooltip="Register a user"
    label="New label"
/>

Adding a badge to an icon button​

You can render a badge on top of an icon button by using the badge slot:

<x-filament::icon-button
    icon="heroicon-m-x-mark"
    label="Mark notifications as read"
>
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::icon-button>

You can change the color of the badge using the badge-color attribute:

<x-filament::icon-button
    icon="heroicon-m-x-mark"
    label="Mark notifications as read"
    badge-color="danger"
>
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::icon-button>
Icon buttons with badges