---
title: Button Blade component
---
## Overview
The button component is used to render a clickable button that can perform an action:
```blade
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
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
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
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
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
New user
```
## Making a button outlined
You can make a button use an "outlined" design using the `outlined` attribute:
```blade
New user
```
## Adding a tooltip to a button
You can add a tooltip to a button by using the `tooltip` attribute:
```blade
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
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
Mark notifications as read
3
```