Кнопки-ссылки
Для отображения визуально различимых ссылок, призывающих к действию, используйте компонент <LinkButton>
.
Импорт
Использование
Используйте компонент <LinkButton>
для визуального выделения ссылок, призывающих к действию.
Кнопка-ссылка полезна для направления пользователей к наиболее релевантному или действующему контенту и часто используется на целевых страницах.
<LinkButton>
требует обязательного заполнения атрибута href
.
Кроме того, можно настроить внешний вид кнопки ссылки с помощью атрибута variant
, который может иметь одно из следующих значений: primary
(по умолчанию), secondary
или minimal
.
Добавление иконок
Включите иконку в кнопку-ссылку, используя атрибут icon
, содержащий имя одной из встроенных иконок Starlight.
Атрибут iconPlacement
можно использовать для размещения иконки перед текстом, задав ему значение start
(по умолчанию end
).
import { LinkButton } from '@astrojs/starlight/components';
<LinkButton href="https://docs.astro.build" variant="secondary" icon="external" iconPlacement="start"> Похожие: Astro</LinkButton>
{% linkbutton href="https://docs.astro.build" variant="secondary" icon="external" iconPlacement="start" %}Похожие: Astro{% /linkbutton %}
Параметры <LinkButton>
Реализация: LinkButton.astro
Компонент <LinkButton>
принимает следующие параметры, а также любые другие атрибуты <a>
:
href
обязательный
тип: string
URL-адрес, на который указывает кнопка-ссылка.
variant
тип: 'primary' | 'secondary' | 'minimal'
по умолчанию: 'primary'
Внешний вид кнопки-ссылки.
Установите значение primary
для заметной ссылки с призывом к действию, использующей акцентный цвет темы, secondary
— для менее заметной ссылки, или minimal
— для ссылки с минимальным оформлением.
icon
тип: string
Кнопка-ссылка может содержать атрибут icon
с именем одной из встроенных иконок Starlight.
iconPlacement
тип: 'start' | 'end'
по умолчанию: 'end'
Определяет расположение значка по отношению к тексту кнопки-ссылки.