Icon button Blade 组件

简介

该按钮组件用于渲染可点击的按钮以执行操作：

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

将图标按钮用作锚链接

默认情况下，图标按钮底层的 HTML 标签是 <button>。可使用 tag 属性将其改为 <a> 标签：

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

设置图标按钮尺寸

默认情况下，图标按钮的尺寸为「中等」。可使用 size 属性将其设为「超小」「小」「大」或「超大」：

<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"
/>

更改图标按钮颜色

默认情况下，图标按钮的颜色为「primary」。可使用 color 属性将其改为 danger、gray、info、success 或 warning：

<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"
/>

为图标按钮添加提示

可使用 tooltip 属性为图标按钮添加提示：

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

为图标按钮添加徽章

可使用 badge 插槽在图标按钮上渲染徽章：

<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>

可使用 badge-color 属性更改徽章颜色：

<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>