Botones de enlace

Para mostrar enlaces de llamada a la acción visualmente distintos, usa el componente <LinkButton>.

Preview

Lee la documentación

Importación

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

Uso

Usa el componente <LinkButton> para mostrar un enlace de llamada a la acción visualmente distinto. Un botón de enlace es útil para dirigir a los usuarios al contenido más relevante o accionable y se usa a menudo en páginas de destino.

Un <LinkButton> requiere un atributo href. Opcionalmente, personaliza la apariencia del botón de enlace usando el atributo variant, que se puede establecer en primary (el valor predeterminado), secondary o minimal.

MDX

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

<LinkButton href="/es/getting-started/">Comienza</LinkButton>
<LinkButton href="/es/reference/configuration/" variant="secondary">
  Referencia de configuración
</LinkButton>

Markdoc

{% linkbutton href="/es/getting-started/" %}Comienza{% /linkbutton %}

{% linkbutton href="/es/reference/configuration/" variant="secondary" %}
Referencia de configuración
{% /linkbutton %}

Preview

Comienza

Referencia de configuración

Agregar iconos a los botones de enlace

Incluye un icono en un botón de enlace usando el atributo icon establecido en el nombre de uno de los iconos integrados de Starlight.

El atributo iconPlacement se puede usar para colocar el icono antes del texto estableciéndolo en start (el valor predeterminado es end).

MDX

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

<LinkButton
  href="https://docs.astro.build"
  variant="secondary"
  icon="external"
  iconPlacement="start"
>
  Relacionado: Astro
</LinkButton>

Markdoc

{% linkbutton
   href="https://docs.astro.build"
   variant="secondary"
   icon="external"
   iconPlacement="start" %}
Relacionado: Astro
{% /linkbutton %}

Preview

Relacionado: Astro

Props de <LinkButton>

Implementación: LinkButton.astro

El componente <LinkButton> acepta las siguientes props y también cualquier otro atributo <a>:

href

requerido
tipo: string

El URL al que apunta el botón de enlace.

variant

tipo: 'primary' | 'secondary' | 'minimal'
por defecto: 'primary'

La apariencia del botón de enlace. Establece primary para un enlace de llamada a la acción prominente que usa el color de acento del tema, secondary para un enlace menos prominente o minimal para un enlace con un estilo mínimo.

icon

tipo: string

Un botón de enlace puede incluir un atributo icon establecido en el nombre de uno de los iconos integrados de Starlight.

iconPlacement

tipo: 'start' | 'end'
por defecto: 'end'

Determina la ubicación del icono en relación con el texto del botón de enlace.