Insignias

Para mostrar pequeñas piezas de información, como un estado o categoría, usa el componente <Badge>.

Preview

Nuevo

Importación

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

Uso

Muestra una insignia usando el componente <Badge> y pasa el contenido que deseas mostrar al atributo text del componente <Badge>.

Por defecto, la insignia usará el color de acento del tema de tu sitio. Para usar un color de insignia integrado, establece el atributo variant en uno de los valores admitidos.

MDX

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

<Badge text="Nota" variant="note" />
<Badge text="Éxito" variant="success" />
<Badge text="Consejo" variant="tip" />
<Badge text="Precaución" variant="caution" />
<Badge text="Peligro" variant="danger" />

Markdoc

{% badge text="Nota" variant="note" /%}
{% badge text="Éxito" variant="success" /%}
{% badge text="Consejo" variant="tip" /%}
{% badge text="Precaución" variant="caution" /%}
{% badge text="Peligro" variant="danger" /%}

Preview

Nota Éxito Consejo Precaución Peligro

Usa diferentes tamaños

Usa el atributo size para controlar el tamaño del texto de la insignia.

MDX

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

<Badge text="Nuevo" size="small" />
<Badge text="Nuevo y mejorado" size="medium" />
<Badge text="Nuevo, mejorado y grande" size="large" />

Markdoc

{% badge text="Nuevo" size="small" /%}
{% badge text="Nuevo y mejorado" size="medium" /%}
{% badge text="Nuevo, mejorado y grande" size="large" /%}

Preview

Nuevo Nuevo y mejorado Nuevo, mejorado y grande

Personaliza las insignias

Personaliza las insignias usando cualquier otro atributo <span> como class o style con CSS personalizado.

MDX

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

<Badge text="Personalizado" variant="success" style={{ fontStyle: 'italic' }} />

Markdoc

{% badge text="Personalizado" variant="success" style="font-style: italic;" /%}

Preview

Personalizado

Props de <Badge>

Implementación: Badge.astro

El componente <Badge> acepta las siguientes propiedades y también cualquier otro atributo <span>:

text

requerido
tipo: string

El contenido de texto que se mostrará en la insignia.

variant

tipo: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
por defecto: 'default'

El color de la insignia a usar: note (azul), tip (morado), danger (rojo), caution (naranja), success (verde) o default (color de acento del tema).

size

tipo: 'small' | 'medium' | 'large'

Define el tamaño de la insignia a mostrar.