Components

Link

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 = ''
)
  • $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')
<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>

Tooltip

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')

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()
<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')