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

# Link 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/link.md).

## Introduction

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::link :href="route('users.create')">
    New user
</x-filament::link>
```

Loading preview

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

## Using a link as a button

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

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

## Setting the size of a link

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::link size="sm">
    New user
</x-filament::link>

<x-filament::link size="lg">
    New user
</x-filament::link>

<x-filament::link size="xl">
    New user
</x-filament::link>

<x-filament::link size="2xl">
    New user
</x-filament::link>
```

Loading preview

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

## Setting the font weight of a link

By default, the font weight of links is `semibold`. You can make it `thin`, `extralight`, `light`, `normal`, `medium`, `bold`, `extrabold` or `black` by using the `weight` attribute:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::link weight="thin">
    New user
</x-filament::link>

<x-filament::link weight="extralight">
    New user
</x-filament::link>

<x-filament::link weight="light">
    New user
</x-filament::link>

<x-filament::link weight="normal">
    New user
</x-filament::link>

<x-filament::link weight="medium">
    New user
</x-filament::link>

<x-filament::link weight="semibold">
    New user
</x-filament::link>
   
<x-filament::link weight="bold">
    New user
</x-filament::link>

<x-filament::link weight="black">
    New user
</x-filament::link> 
```

Alternatively, you can pass in a custom CSS class to define the weight:

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::link weight="md:font-[650]">
    New user
</x-filament::link>
```

Loading preview

![Links in different font weights](https://filament-34a8cf01.mintlify.site/docs/images/4.x/light/components/link/weights.jpg)

## Changing the color of a link

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

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

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

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

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

Loading preview

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

## Adding an icon to a link

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

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

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

Loading preview

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

## Adding a tooltip to a link

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

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

## Adding a badge to a link

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

```blade theme={"theme":"gruvbox-dark-hard"}
<x-filament::link>
    Mark notifications as read

    <x-slot name="badge">
        3
    </x-slot>
</x-filament::link>
```

You can [change the color](https://filament-34a8cf01.mintlify.site/4.x/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::link badge-color="danger">
    Mark notifications as read

    <x-slot name="badge">
        3
    </x-slot>
</x-filament::link>
```

Loading preview

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

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