Components > Link

Basics
Tooltip
Fill
Icon

Basics

To create a styled link, you can use the Link component.

make(
    Closure|string $href,
    Closure|string $label = ''
)

make(
    Closure|string $href,
    Closure|string $label = ''
)make(
    Closure|string $href,
    Closure|string $label = ''
)

make(
    Closure|string $href,
    Closure|string $label = ''
)

$href - link to the resource,
$value - name of the link.

use MoonShine\UI\Components\Link;
 
Link::make('https://moonshine-laravel.com', 'Moonshine')
use MoonShine\UI\Components\Link;Link::make('https://moonshine-laravel.com', 'Moonshine')use MoonShine\UI\Components\Link;
 
Link::make('https://moonshine-laravel.com', 'Moonshine')
use MoonShine\UI\Components\Link;Link::make('https://moonshine-laravel.com', 'Moonshine')

<x-moonshine::link-button href="#">
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native href="#">
    Link
</x-moonshine::link-native>
<x-moonshine::link-button href="#">    Link</x-moonshine::link-button><x-moonshine::link-native href="#">    Link</x-moonshine::link-native><x-moonshine::link-button href="#">
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native href="#">
    Link
</x-moonshine::link-native>
<x-moonshine::link-button href="#">    Link</x-moonshine::link-button><x-moonshine::link-native href="#">    Link</x-moonshine::link-native>

To display a tooltip on hover, the tooltip() method is used.

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->tooltip('Tooltip')

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->tooltip('Tooltip')Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->tooltip('Tooltip')

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->tooltip('Tooltip')

Fill

The filled() method is responsible for the fill.

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->filled()
Link::make('https://moonshine-laravel.com', 'Moonshine')    ->filled()Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->filled()
Link::make('https://moonshine-laravel.com', 'Moonshine')    ->filled()

<x-moonshine::link-button
    href="#"
    :filled="true"
>
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native
    href="#"
    :filled="true"
>
    Link
</x-moonshine::link-native>
<x-moonshine::link-button    href="#"    :filled="true">    Link</x-moonshine::link-button><x-moonshine::link-native    href="#"    :filled="true">    Link</x-moonshine::link-native><x-moonshine::link-button
    href="#"
    :filled="true"
>
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native
    href="#"
    :filled="true"
>
    Link
</x-moonshine::link-native>
<x-moonshine::link-button    href="#"    :filled="true">    Link</x-moonshine::link-button><x-moonshine::link-native    href="#"    :filled="true">    Link</x-moonshine::link-native>

Icon

To add an icon, use the icon() method.

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->icon('arrow-top-right-on-square')

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->icon('arrow-top-right-on-square')Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->icon('arrow-top-right-on-square')

Link::make('https://moonshine-laravel.com', 'Moonshine')
    ->icon('arrow-top-right-on-square')