Badge Insignia
Introducción
El componente Badge es un elemento visual pequeño y versátil utilizado para etiquetar, categorizar o resaltar metadatos de contenido. Se utiliza comúnmente para mostrar estados (como "Éxito" o "Pendiente"), etiquetas o contadores numéricos.
A través del CMS Page Builder, los autores de contenido pueden configurar rápidamente variantes de insignias, tamaños y paletas de colores para ajustarse perfectamente a sus pautas de diseño.
Uso
Puede personalizar la apariencia de los distintivos utilizando estilos visuales, colores personalizados y tamaños responsivos.
Variantes de estilo
El componente admite múltiples estilos de visualización para ayudar a establecer la jerarquía visual.
{
"type": "badge",
"text": "New Feature",
"variant": "solid",
"colorPalette": "blue"
}
Paletas de color
Elija entre una amplia gama de colores de acento del tema para indicar significados semánticos.
{
"type": "badge",
"text": "Error Detected",
"variant": "solid",
"colorPalette": "red"
}
Opciones de tamaño
Escalone sus distintivos desde píldoras de metadatos compactas hasta etiquetas de llamada más grandes.
{
"type": "badge",
"text": "Large Label",
"size": "lg",
"colorPalette": "blue",
"variant": "subtle"
}
Propiedades
Al agregar un bloque badge dentro del esquema del Page Builder (content/pages/*.json), están disponibles los siguientes parámetros de configuración:
| Parameter | Type | Default | Description |
|---|---|---|---|
type | String | - | El identificador del bloque. Debe establecerse en "badge". |
text | String | - | El contenido de la etiqueta de texto renderizado dentro del distintivo. |
variant | Select | "subtle" | El tratamiento de estilo visual. Opciones: "solid", "subtle", "surface", "outline". |
colorPalette | Select | "green" | Acento de color temático semántico. Opciones: "blue", "green", "red", "purple", "orange", "amber", "cyan", "slate", "gray". |
size | Select | "md" | Las dimensiones físicas del distintivo. Opciones: "sm", "md", "lg", "xl", "2xl". |
class | String | - | Anulaciones de clase CSS personalizadas aplicadas directamente al distintivo. |