按钮组件用于渲染一个可点击的按钮,该按钮可以执行一个动作:
<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"
/>默认情况下, 图标按钮的大小为"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"
/>默认情况下,图标按钮的颜色是“primary”。 您可以将其更改为 danger、 gray、 info、 success 或 warning 通过使用 color 属性:
<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>