UI компоненты

Ссылка

Основы

Для создания стилизованной ссылки можно использовать компоненты moonshine::link-button или 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>

Заливка

За заливку отвечает параметр 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.

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

Все доступные иконки.