UI components

Link

Basics

To create a stylized link, you can use the moonshine::link-button components or ``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>

Fill

The filled parameter is responsible for filling.

<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

You can pass the icon parameter.

<x-moonshine::link-button
    href="#"
    icon="heroicons.arrow-top-right-on-square"
>
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native
    href="#"
    icon="heroicons.arrow-top-right-on-square"
>
    Link
</x-moonshine::link-native>
<x-moonshine::link-button
    href="#"
    icon="heroicons.arrow-top-right-on-square"
>
    Link
</x-moonshine::link-button>
 
<x-moonshine::link-native
    href="#"
    icon="heroicons.arrow-top-right-on-square"
>
    Link
</x-moonshine::link-native>

All available icons .