Material Design 3
Catálogo de
Componentes Estandarizado.
Un escaparte vivo de componentes y estilos tipográficos siguiendo las directrices oficiales de Material 3, adaptado para una experiencia premium.
Escala Tipográfica
La escala de M3 optimiza la legibilidad y jerarquía a través de 5 estilos clave: Display, Headline, Title, Body y Label.
| Estilo | Grande (Default) | Medio | Pequeño |
|---|---|---|---|
| Display | Display L | Display M | Display S |
| Headline | Headline L | Headline M | Headline S |
| Title | Title L | Title M | Title S |
| Body | Body L | Body M | Body S |
| Label | Label L | Label M | Label S |
Botones
Acciones con distintos niveles de énfasis. Formato de cápsula total con respuesta táctil refinada.
Tipos de Énfasis
Tamaños
Íconos
Campos de Texto
Entradas de datos con soporte para etiquetas flotantes y variantes oficiales: Filled y Outlined.
Variante Filled (Predeterminada)
Variante Outlined
Label
Etiquetas semánticas para formularios, asociadas a controles mediante htmlFor.
Tarjetas
Contenedores sólidos para agrupar información con radios XL y elevación tonal sin sombras.
Tabla de Datos
Visualización de información estructurada con estilos M3 Flat, soporte para acciones inline y estados visuales.
| Nombre completo | Categoría | Estado | Acciones |
|---|---|---|---|
| Juan Pérez | Administrador | ||
| Ana García | Socio Vitalicio |
Botones de Acción Flotante (FAB)
Acción principal de la pantalla. Disponible en cuatro tamaños y variantes de color.
Tamaños
Variantes de Color
Chips
Elementos compactos para filtrado, selección de entradas y acciones contextuales.
Separador
Divisor visual para separar secciones de contenido, horizontal o vertical.
Horizontal
Vertical
Skeleton
Marcador de posición animado para estados de carga, evitando saltos de diseño.
Tooltip
Información contextual emergente al pasar el cursor sobre un elemento interactivo.
Select
Componente de selección desplegable con soporte para etiquetas flotantes y variantes M3.
Diálogos (Modales)
Ventanas emergentes centradas para tareas críticas o información adicional.
Iconografía
Iconos de sistema optimizados para legibilidad y consistencia visual.