> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Button Blade component

> [!WARNING]
>
> You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x).

## Overview

The button component is used to render a clickable button that can perform an action:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button wire:click="openNewUserModal">
    New user
</x-filament::button>
```

## Using a button as an anchor link

By default, a button's underlying HTML tag is `<button>`. You can change it to be an `<a>` tag by using the `tag` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button
    href="https://filamentphp.com"
    tag="a"
>
    Filament
</x-filament::button>
```

## Setting the size of a button

By default, the size of a button is "medium". You can make it "extra small", "small", "large" or "extra large" by using the `size` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

## Changing the color of a button

By default, the color of a button is "primary". You can change it to be `danger`, `gray`, `info`, `success` or `warning` by using the `color` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<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>
```

## Adding an icon to a button

You can add an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to a button by using the `icon` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button icon="heroicon-m-sparkles">
    New user
</x-filament::button>
```

You can also change the icon's position to be after the text instead of before it, using the `icon-position` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button
    icon="heroicon-m-sparkles"
    icon-position="after"
>
    New user
</x-filament::button>
```

## Making a button outlined

You can make a button use an "outlined" design using the `outlined` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button outlined>
    New user
</x-filament::button>
```

## Adding a tooltip to a button

You can add a tooltip to a button by using the `tooltip` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button tooltip="Register a user">
    New user
</x-filament::button>
```

## Adding a badge to a button

You can render a [badge](https://filament-34a8cf01.mintlify.site/3.x/support/blade-components/badge.md) on top of a button by using the `badge` slot:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button>
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::button>
```

You can [change the color](https://filament-34a8cf01.mintlify.site/3.x/support/blade-components/badge.md#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::button badge-color="danger">
    Mark notifications as read
    
    <x-slot name="badge">
        3
    </x-slot>
</x-filament::button>
```

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/3.x/packages/support/docs/09-blade-components/02-button.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.