Badge
Indicador de estado o etiqueta en línea con marcado semántico.
Vista previa
Este ejemplo usa estilos solo para documentación. En producción, utiliza una de las recetas incluidas (CSS, Tailwind o UnoCSS).
Badge renderiza una etiqueta o indicador de estado pequeño en línea con semántica accesible. Proporciona un primitivo headless que携带 atributos de datos semánticos para la integración de estilos con tu sistema de diseño.
Uso
Badge tiene una sola parte Root. Pasa el contenido como children.
import * as Badge from "@solidiom/badge"
;<Badge.Root>Nuevo</Badge.Root>Instalación
Instala el paquete con pnpm add @solidiom/badge. El paquete requiere dependencias pares compatibles de solid-js y @solidjs/web.
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children | JSX.Element | — | Contenido para mostrar dentro del badge. |
class | string | — | Clase CSS adicional para estilos. |
Estilos
Badge lleva los atributos data-scope="badge" y data-part="root". Estílalo con colores de fondo, colores de texto, padding y border-radius apropiados para tu sistema de diseño. El elemento se renderiza como un <span>; aplica tu receta visual usando los atributos data para seleccionar.
Interacción con teclado
Este primitivo no tiene interacción con teclado. Renderiza contenido estático que no recibe foco ni responde a eventos de teclado.
Renderizado SSR e hidratación
Badge es un elemento de visualización pasivo sin estado interactivo. Se renderiza como HTML estático y no requiere hidratación en el cliente.