Skip to content
Alebat

Insignias

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

Importación

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

Uso de Badge
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" />

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.

Tamaños de Badge
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" />

Preview:

Nuevo Nuevo y mejorado Nuevo, mejorado y grande

Personaliza las insignias

Personaliza las insignias usando cualquier otro atributo <span como classostyle` con CSS personalizado.

Personalización de Badge
import { Badge } from "@astrojs/starlight/components";


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

Preview:

Personalizado

Props de <Badge>

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

text

  • Tipo: string
  • Requerido: Sí
  • Descripción: El texto que se mostrará en la insignia.

variant

  • Tipo: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
  • por defecto: default
  • Descripción: 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'
  • por defecto: medium
  • Descripción: El tamaño del texto de la insignia.