Перейти к содержимому

Кнопки-ссылки

Для отображения визуально различимых ссылок, призывающих к действию, используйте компонент <LinkButton>.

Импорт

import { LinkButton } from '@astrojs/starlight/components';

Использование

Используйте компонент <LinkButton> для визуального выделения ссылок, призывающих к действию. Кнопка-ссылка полезна для направления пользователей к наиболее релевантному или действующему контенту и часто используется на целевых страницах.

<LinkButton> требует обязательного заполнения атрибута href. Кроме того, можно настроить внешний вид кнопки ссылки с помощью атрибута variant, который может иметь одно из следующих значений: primary (по умолчанию), secondary или minimal.

import { LinkButton } from '@astrojs/starlight/components';
<LinkButton href="/ru/getting-started/">Первые шаги</LinkButton>
<LinkButton href="/ru/reference/configuration/" variant="secondary">
Справочник по конфигурации
</LinkButton>

Добавление иконок

Включите иконку в кнопку-ссылку, используя атрибут 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>

Реализация: LinkButton.astro

Компонент <LinkButton> принимает следующие параметры, а также любые другие атрибуты <a>:

href

обязательный
тип: string

URL-адрес, на который указывает кнопка-ссылка.

variant

тип: 'primary' | 'secondary' | 'minimal'
по умолчанию: 'primary'

Внешний вид кнопки-ссылки. Установите значение primary для заметной ссылки с призывом к действию, использующей акцентный цвет темы, secondary — для менее заметной ссылки, или minimal — для ссылки с минимальным оформлением.

icon

тип: string

Кнопка-ссылка может содержать атрибут icon с именем одной из встроенных иконок Starlight.

iconPlacement

тип: 'start' | 'end'
по умолчанию: 'end'

Определяет расположение значка по отношению к тексту кнопки-ссылки.