链接按钮

要显示视觉上与众不同的号召性链接，请使用 <LinkButton> 组件。

预览

阅读文档

导入

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

用法

使用 <LinkButton> 组件可以显示视觉上与众不同的号召性链接。链接按钮对于引导用户到最相关或最可操作的内容非常有用，并且经常在落地页上使用。

<LinkButton> 需要一个 href 属性。你可以选择使用 variant 属性来自定义链接按钮的外观，该属性可以设置为 primary (默认值)、 secondary 或 minimal。

MDX

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

<LinkButton href="/getting-started/">Get started</LinkButton>
<LinkButton href="/reference/configuration/" variant="secondary">
  Configuration Reference
</LinkButton>

Markdoc

{% linkbutton href="/getting-started/" %}Get started{% /linkbutton %}

{% linkbutton href="/reference/configuration/" variant="secondary" %}
Configuration Reference
{% /linkbutton %}

预览

开始使用

配置参考

为链接按钮添加图标

通过将 icon 属性设置为 Starlight 内置图标之一的名称，可以在链接按钮中包含一个图标。

iconPlacement 属性可以用来将图标放置在文本之前，只需将其设置为 start（默认为 end）。

MDX

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

<LinkButton
  href="https://docs.astro.js.cn"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Related: Astro
</LinkButton>

Markdoc

{% linkbutton
   href="https://docs.astro.js.cn"
   variant="secondary"
   icon="external"
   iconPlacement="start" %}
Related: 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'

决定图标相对于链接按钮文本的位置。