Skip to content

Commit

Permalink
i18n(es): translate link-buttons (#2410)
Browse files Browse the repository at this point in the history
Co-authored-by: HiDeoo <[email protected]>
  • Loading branch information
dreyfus92 and HiDeoo authored Sep 26, 2024
1 parent 2ba048f commit f7b1509
Showing 1 changed file with 145 additions and 0 deletions.
145 changes: 145 additions & 0 deletions docs/src/content/docs/es/components/link-buttons.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
---
title: Botones de enlace
description: Aprende a crear botones de enlace en Starlight para enlaces de llamada a la acción visualmente distintos.
---

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

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

import Preview from '~/components/component-preview.astro';

<Preview>

<LinkButton slot="preview" href="/es/getting-started/">
Lee la documentación
</LinkButton>

</Preview>

## Importación

```tsx
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`](#href).
Opcionalmente, personaliza la apariencia del botón de enlace usando el atributo [`variant`](#variant), que se puede establecer en `primary` (el valor predeterminado), `secondary` o `minimal`.

<Preview>

```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>
```

<Fragment slot="markdoc">

```markdoc
{% linkbutton href="/es/getting-started/" %}Comienza{% /linkbutton %}
{% linkbutton href="/es/reference/configuration/" variant="secondary" %}
Referencia de configuración
{% /linkbutton %}
```

</Fragment>

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

</Preview>

### Agregar iconos a los botones de enlace

Incluye un icono en un botón de enlace usando el atributo [`icon`](#icon) establecido en el nombre de [uno de los iconos integrados de Starlight](/es/reference/icons/#todos-los-iconos).

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

<Preview>

```mdx {6-7}
import { LinkButton } from '@astrojs/starlight/components';

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

<Fragment slot="markdoc">

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

</Fragment>

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

</Preview>

## Props de `<LinkButton>`

**Implementación:** [`LinkButton.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/user-components/LinkButton.astro)

El componente `<LinkButton>` acepta las siguientes props y también cualquier [otro atributo `<a>`](https://developer.mozilla.org/es/docs/Web/HTML/Element/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](/es/reference/icons/#todos-los-iconos).

### `iconPlacement`

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

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

0 comments on commit f7b1509

Please sign in to comment.