Componente de Badges con Tailwind CSS
Este componente de badge ofrece una solución versátil para resaltar información o etiquetas en tus diseños. Su estructura flexible y variantes predefinidas permiten una integración rápida y personalizable en cualquier proyecto. 🎯
Características principales
- Base adaptable: Incluye texto en tamaño pequeño, bordes redondeados y estilo visual limpio con opciones de color predefinidas.
- Variedad de estilos: Diferentes variantes para ajustarse a contextos claros, oscuros o con colores destacados.
- Uso optimizado: Diseñado con
max-w-fitpara ajustarse automáticamente al contenido. - Estilo destacado: Texto en mayúsculas y fuente seminegrita para mayor legibilidad e impacto visual.
Variantes disponibles
- Light (
badge-light): Fondo claro y texto oscuro, ideal para entornos minimalistas. - Dark (
badge-dark): Fondo oscuro y texto claro, perfecto para diseños en modo oscuro. - Primary (
badge-primary): Colores destacados que llaman la atención, perfectos para etiquetas importantes. - Secondary (
badge-secondary): Una opción complementaria para etiquetas secundarias. - Outline (
badge-outline): Fondo blanco con borde definido, ideal para estilos más sutiles. - Link (
badge-link): Estilo ligero, sin fondo ni bordes, con un diseño que se asemeja a un enlace.
Ejemplos de uso
- Badge de estado: Indicar el estado de un elemento (e.g., «Activo», «Pendiente»).
- Categorías: Agrupar elementos por temática.
- Destacados: Etiquetas como «Nuevo» o «Oferta».
Ventajas del componente
- Consistencia visual: Diseñado para mantener uniformidad en el estilo de tus proyectos.
- Escalabilidad: Fácil de adaptar y extender según las necesidades del diseño.
- Flexibilidad: Variantes predefinidas que se integran con diferentes paletas de colores y estilos.
Este componente de badge es una herramienta sencilla pero poderosa para mejorar la organización y presentación visual de tu interfaz. 💻✨
css code
.badge {
@apply text-sm py-0.5 px-4 rounded-md max-w-fit bg-primary-100 font-semibold text-primary-500 uppercase;
&-light {
@apply bg-zinc-100 text-zinc-800 border border-zinc-100;
}
&-dark {
@apply bg-zinc-700 text-zinc-100 border border-zinc-700;
}
&-primary {
@apply bg-primary-500 text-zinc-100 border border-primary-500;
}
&-secondary {
@apply bg-secondary-500 text-zinc-100 border border-secondary-500;
}
&-outline {
@apply bg-white text-zinc-700 border border-zinc-700;
}
&-link {
@apply text-zinc-700 px-0;
}
}