Componentes atómicos
Son los bloques de construcción fundamentales en Nimbus. Se refieren a los elementos de UI más básicos, como botones, inputs, checkboxes, etc. Estos componentes atómicos son independientes y pueden ser utilizados y reutilizados para formar componentes compuestos.
Badge
Comunica la cantidad de ítems pendientes o el estado de un elemento mediante un contador breve resaltado por color.
Leer documentaciónBox
Agrupa, espacia y posiciona elementos aplicando propiedades visuales y de layout sobre un contenedor.
Leer documentaciónCheckbox
Permite seleccionar una o varias opciones de una lista, de forma independiente entre sí.
Leer documentaciónChip
Permite representar criterios, filtros o atributos aplicados a una lista de datos, de forma compacta y opcionalmente removible.
Leer documentaciónDivider
Separa visualmente secciones de contenido o grupos de elementos dentro de una misma superficie, mediante una línea horizontal o vertical.
Leer documentaciónFile uploader
Permite cargar un archivo o una imagen arrastrándolo o seleccionándolo desde el explorador del sistema.
Leer documentaciónIcon button
Permite ejecutar una acción representada solo por un ícono, sin texto visible, cuando el espacio es limitado o la acción es inequívoca.
Leer documentaciónIcon
Permite mostrar un ícono de la biblioteca de Nimbus dentro o junto a otro contenido, para reforzar visualmente una acción, un estado o un mensaje.
Leer documentaciónLabel
Nombra un campo de formulario y describe qué información se espera completar en él.
Leer documentaciónLink
Permite navegar a otra página o sección, o ejecutar una acción secundaria, con menor peso visual que un botón.
Leer documentaciónList
Permite organizar varios textos relacionados en formato de lista, con bullet point o numerador.
Leer documentaciónMultiSelect
Permite elegir varias opciones dentro de una lista predefinida, mostradas como chips removibles dentro del campo.
Leer documentaciónPopover
Permite mostrar acciones o información complementaria en una caja flotante anclada a un elemento, que se abre al interactuar con él.
Leer documentaciónProgress Bar
Muestra el avance de una tarea medible como una barra que se llena de 0 a 100.
Leer documentaciónRadio
Seleccionar una única opción dentro de una lista de opciones mutuamente excluyentes.
Leer documentaciónSelect
Permite elegir una opción dentro de una lista predefinida, mostrada en un campo desplegable nativo.
Leer documentaciónSkeleton
Muestra un placeholder animado con la forma aproximada de un contenido que todavía está cargando, para anticipar su estructura y reducir el salto de layout.
Leer documentaciónSlider
Permite seleccionar un valor o un intervalo de valores dentro de un rango conocido, deslizando un controlador sobre una pista horizontal.
Leer documentaciónSpinner
Indica que un proceso está en curso o que un contenido se está cargando, mediante un ícono animado sin texto.
Leer documentaciónStack
El componente Stack nos permite agrupar elementos y/o componentes de forma horizontal o vertical.
Leer documentaciónTag
Comunica el estado o la categoría de un elemento mediante una palabra clave breve y un color semántico.
Leer documentaciónText
Escribe y da formato a bloques de texto con jerarquía tipográfica básica dentro de páginas y componentes.
Leer documentaciónTextarea
Permite ingresar y editar texto o contenido extenso en un campo de múltiples líneas.
Leer documentaciónThumbnail
Permite mostrar la miniatura de una imagen, con un placeholder automático cuando la imagen no está disponible.
Leer documentaciónTitle
Dar jerarquía visual y semántica a los títulos, encabezados y secciones de contenido en una página.
Leer documentaciónToast
Notificar de forma breve y temporal el resultado de una acción que acaba de ocurrir o el avance de un proceso, sin interrumpir la navegación.
Leer documentaciónToggle
Permite activar o desactivar una configuración binaria con efecto inmediato, sin un paso de guardado.
Leer documentaciónTooltip
Permite mostrar un texto de ayuda breve sobre un elemento al pasar el cursor sobre él, sin requerir una interacción adicional.
Leer documentaciónAyudanos a mejorar la documentación
¿Encontraste un problema o tenés una sugerencia? Contanos.