> ## 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.

# Badge Blade component

> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.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/components/badge.md).

## Introduction

The badge component is used to render a small box with some text inside:

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

Loading preview

![A simple badge](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/badge/simple.jpg)

## Setting the size of a badge

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::badge size="xs">
    New
</x-filament::badge>

<x-filament::badge size="sm">
    New
</x-filament::badge>
```

Loading preview

![Badges in different sizes](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/badge/sizes.jpg)

## Changing the color of the badge

By default, the color of a badge 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::badge color="danger">
    New
</x-filament::badge>

<x-filament::badge color="gray">
    New
</x-filament::badge>

<x-filament::badge color="info">
    New
</x-filament::badge>

<x-filament::badge color="success">
    New
</x-filament::badge>

<x-filament::badge color="warning">
    New
</x-filament::badge>
```

Loading preview

![Badges in different colors](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/badge/colors.jpg)

## Adding an icon to a badge

You can add an [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to a badge by using the `icon` attribute:

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

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::badge
    icon="heroicon-m-sparkles"
    icon-position="after"
>
    New
</x-filament::badge>
```

Loading preview

![Badges with icons](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/badge/icon.jpg)

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/docs/12-components/03-badge.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.