[핵심개념.Blade컴포넌트] icon-button

개요

버튼 컴포넌트는 클릭 가능한 버튼을 렌더링하여 동작을 수행할 수 있도록 사용됩니다:

<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"입니다. color 속성을 사용하여 danger, gray, info, 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"
/>

아이콘 버튼에 툴팁 추가하기

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>