跳到主要内容
版本：3.0

Button Blade 组件

概述​

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

<x-filament::button wire:click="openNewUserModal">
    New user
</x-filament::button>

将按钮用作锚链接​

默认情况下，按钮所依赖的 HTML 标签是 <button>。你可以使用 tag 属性将其修改为 <a> 标签：

<x-filament::button
    href="https://filamentphp.com"
    tag="a"
>
    Filament
</x-filament::button>

设置按钮大小​

默认情况下， 按钮大小是 "medium"。你可以使用 size 属性修改其大小：

<x-filament::button size="xs">
    New user
</x-filament::button>

<x-filament::button size="sm">
    New user
</x-filament::button>

<x-filament::button size="lg">
    New user
</x-filament::button>

<x-filament::button size="xl">
    New user
</x-filament::button>

修改按钮颜色​

默认情况下，按钮颜色是 "primary"。你可以使用 color 属性将其修改为 danger、gray、info、success 或 warning：

<x-filament::button color="danger">
    New user
</x-filament::button>

<x-filament::button color="gray">
    New user
</x-filament::button>

<x-filament::button color="info">
    New user
</x-filament::button>

<x-filament::button color="success">
    New user
</x-filament::button>

<x-filament::button color="warning">
    New user
</x-filament::button>

按钮中添加图标​

你可以使用 icon 属性将图标添加到按钮中：

<x-filament::button icon="heroicon-m-sparkles">
    New user
</x-filament::button>

你也可以修改使用 icon-position 属性修改图标位置，将其放到文本后面，而非前面。

<x-filament::button
    icon="heroicon-m-sparkles"
    icon-position="after"
>
    New user
</x-filament::button>

按钮轮廓​

你可以使用 outlined 属性使按钮应用 "outlined" 轮廓设计：

<x-filament::button outlined>
    New user
</x-filament::button>

按钮中添加 tooltip​

你可以使用 tooltip 属性，在按钮中添加 tooltip：

<x-filament::button tooltip="Register a user">
    New user
</x-filament::button>

按钮中添加徽章​

使用 badge 插槽，你可以在按钮顶部添加徽章：

<x-filament::button>
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::button>

你可以使用 badge-color 属性修改徽章颜色：

<x-filament::button badge-color="danger">
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::button>