Button Blade 组件

#概述

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

<x-filament::button wire:click="openNewUserModal">
    New user
</x-filament::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>
<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>
<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>
<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>
<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>
<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>
<x-filament::button outlined>
    New user
</x-filament::button>

#按钮中添加 tooltip

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

<x-filament::button tooltip="Register a user">
    New user
</x-filament::button>
<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>
<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>
<x-filament::button badge-color="danger">
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::button>

Edit on GitHub

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