Icon button Blade component

#概述

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

<x-filament::icon-button
    icon="heroicon-m-plus"
    wire:click="openNewUserModal"
    label="New label"
/>
<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"
/>
<x-filament::icon-button
    icon="heroicon-m-arrow-top-right-on-square"
    href="https://filamentphp.com"
    tag="a"
    label="Filament"
/>

#设置图标按钮大小

默认情况下，图标按钮的大小为 "medium"。使用 size 属性，你可以将其改为 "extra small"、"small"、"large" 或者 "extra large"：

<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"
/>
<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、info、primary、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"
/>
<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

使用 tooltip 属性，你可以为图标按钮添加 tooltip：

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

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion