> ## Documentation Index
> Fetch the complete documentation index at: https://filamentphp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Button Blade component
export const EditOnGitHub = ({version, path}) => {
const url = `https://github.com/filamentphp/filament/edit/${version}/${path}`;
return ;
};
export const Footer = () => {
const sponsorsByTier = JSON.parse(`{
"agency_partner": [
{
"name": "Kirschbaum",
"url": "https://kirschbaumdevelopment.com/solutions/filament-development",
"filename": "kirschbaum.svg"
}
],
"gold": [
{
"name": "Agiledrop",
"url": "https://www.agiledrop.com/laravel?utm_source=filament",
"filename": "agiledrop.svg"
},
{
"name": "Baiz.ai",
"url": "https://baiz.ai",
"filename": "baiz-ai.svg"
},
{
"name": "CMS Max",
"url": "https://cmsmax.com?ref=filamentphp.com",
"filename": "cms-max.svg"
},
{
"name": "Mailtrap",
"url": "https://mailtrap.io/email-sending?utm_source=community&utm_medium=referral&utm_campaign=filament",
"filename": "mailtrap.svg"
},
{
"name": "SerpApi",
"url": "https://serpapi.com/?utm_source=filamentphp",
"filename": "serpapi.svg"
}
]
}`);
function shuffleArray(items) {
const result = [...items];
for (let index = result.length - 1; index > 0; index--) {
const randomIndex = Math.floor(Math.random() * (index + 1));
[result[index], result[randomIndex]] = [result[randomIndex], result[index]];
}
return result;
}
const sponsors = Object.entries(sponsorsByTier).flatMap(([, sponsors]) => shuffleArray(sponsors));
return ;
};
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](/docs/5.x).
## Overview
The button component is used to render a clickable button that can perform an action:
```blade theme={"theme":"gruvbox-dark-hard"}
New user
```
## Using a button as an anchor link
By default, a button's underlying HTML tag is ``. You can change it to be an `` tag by using the `tag` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
Filament
```
## 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"}
New user
New user
New user
New user
```
## 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"}
New user
New user
New user
New user
New user
```
## 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"}
New user
```
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"}
New user
```
## Making a button outlined
You can make a button use an "outlined" design using the `outlined` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
New user
```
## 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"}
New user
```
## Adding a badge to a button
You can render a [badge](./badge) on top of a button by using the `badge` slot:
```blade theme={"theme":"gruvbox-dark-hard"}
Mark notifications as read
3
```
You can [change the color](./badge#changing-the-color-of-the-badge) of the badge using the `badge-color` attribute:
```blade theme={"theme":"gruvbox-dark-hard"}
Mark notifications as read
3
```
)}
Your logo here