Core Concepts - Blade Components
Link Blade component
Overview
The link component is used to render a clickable link that can perform an action:
<x-filament::link :href="route('users.create')"> New user</x-filament::link>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:
<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:
<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>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:
<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:
<x-filament::link weight="md:font-[650]"> New user</x-filament::link>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:
<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>Adding an icon to a link
You can add an icon to a link by using the icon attribute:
<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:
<x-filament::link icon="heroicon-m-sparkles" icon-position="after"> New user</x-filament::link>Adding a tooltip to a link
You can add a tooltip to a link by using the tooltip attribute:
<x-filament::link tooltip="Register a user"> New user</x-filament::link>Adding a badge to a link
You can render a badge on top of a link by using the badge slot:
<x-filament::link> Mark notifications as read <x-slot name="badge"> 3 </x-slot></x-filament::link>You can change the color of the badge using the badge-color attribute:
<x-filament::link badge-color="danger"> Mark notifications as read <x-slot name="badge"> 3 </x-slot></x-filament::link>Still need help? Join our Discord community or open a GitHub discussion