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

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

Превью

Прочитайте документацию

Импорт

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

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

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

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

MDX

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

<LinkButton href="/ru/getting-started/">Первые шаги</LinkButton>
<LinkButton href="/ru/reference/configuration/" variant="secondary">
  Справочник по конфигурации
</LinkButton>

Markdoc

{% linkbutton href="/ru/getting-started/" %}Первые шаги{% /linkbutton %}

{% linkbutton href="/ru/reference/configuration/" variant="secondary" %}
Справочник по конфигурации
{% /linkbutton %}

Превью

Первые шаги

Справочник по конфигурации

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

Включите иконку в кнопку-ссылку, используя атрибут icon, содержащий имя одной из встроенных иконок Starlight.

Атрибут iconPlacement можно использовать для размещения иконки перед текстом, задав ему значение start (по умолчанию end).

MDX

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

<LinkButton
  href="https://docs.astro.build"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Похожие: Astro
</LinkButton>

Markdoc

{% linkbutton
   href="https://docs.astro.build"
   variant="secondary"
   icon="external"
   iconPlacement="start" %}
Похожие: Astro
{% /linkbutton %}

Превью

Похожие: Astro

Параметры <LinkButton>

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

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

href

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

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

variant

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

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

icon

тип: string

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

iconPlacement

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

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