Button Blade 组件

简介

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

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

设置按钮尺寸

默认情况下，按钮的尺寸为「中等」。可使用 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 属性让按钮采用「描边」设计：

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

你可以将 outlined 属性与任意颜色组合使用：

为按钮添加提示

可使用 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>