Skip to content
Alebat

Botones de enlace

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

Importación

Importar componentes
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.

Uso de LinkButton
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>

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).

Agregar iconos a los botones de enlace
import { LinkButton } from "@astrojs/starlight/components";


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

Preview:

Relacionado: Astro

Props de <LinkButton>

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

href

Requerido Tipo: string

La URL a la que se dirigirá el enlace.

variant

Tipo: 'primary' | 'secondary' | 'minimal' Valor predeterminado: 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: 'start' | 'end' Valor predeterminado: end

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