UI Design System - Jefferson S. Pulido M.

UI Design System

Librería transversal de componentes UI reutilizables, accesibles y altamente personalizables, diseñada para estandarizar interfaces, mejorar la mantenibilidad del código y escalar productos digitales en ecosistemas React y Next.js.

Esta implementación hace parte de una prueba técnica y demuestra criterios de arquitectura, accesibilidad, tipado estricto con TypeScript, testing y documentación orientada a equipos de desarrollo frontend en organizaciones como Davivienda y Grupo Bolívar.

Button

El componente Button se utiliza para realizar acciones del usuario.

Prop	Tipo	Descripción	Required
label	string	Texto del botón	Required
variant	primary \| secondary \| ghost	Variante visual	Optional
icon	ReactNode	Icono opcional	Optional
iconPosition	left \| right	Posición del icono	Optional
loading	boolean	Estado de carga	Optional
disabled	boolean	Deshabilita el botón	Optional
ariaLabel	string	Etiqueta de texto descriptivo y accesible	Optional
onClick	function	Accion a ejecutar	Optional
color	string (HEX)	Codigo fondo	Optional

Proplabel

Tipostring

DescripciónTexto del botón

Required

Propvariant

Tipoprimary | secondary | ghost

DescripciónVariante visual

Optional

Propicon

TipoReactNode

DescripciónIcono opcional

Optional

PropiconPosition

Tipoleft | right

DescripciónPosición del icono

Optional

Proploading

Tipoboolean

DescripciónEstado de carga

Optional

Propdisabled

Tipoboolean

DescripciónDeshabilita el botón

Optional

PropariaLabel

Tipostring

DescripciónEtiqueta de texto descriptivo y accesible

Optional

ProponClick

Tipofunction

DescripciónAccion a ejecutar

Optional

Propcolor

Tipostring (HEX)

DescripciónCodigo fondo

Optional

Card

El componente Card permite agrupar contenido relacionado de forma clara, consistente y accesible. Es un elemento fundamental para dashboards, listados, vistas de detalle y acciones contextuales dentro del sistema.

Prop	Tipo	Descripción	Required
title	string	Título principal del Card	Required
description	string	Texto descriptivo del contenido (requerido si no se usan children)	Optional
children	ReactNode	Contenido personalizado del Card (requerido si no hay description)	Optional
image	string	URL de una imagen decorativa superior	Optional
imageAlt	string	Texto alternativo accesible para la imagen	Optional
size	sm \| md \| lg	Define el ancho máximo del Card	Optional
actions	CardAction[label: string; onClick: () => void; variant?: "primary" \| "secondary"; color?: string;] (max 2)	Acciones configurables mostradas como botones	Optional
accentColor	string (HEX)	Color de énfasis visual del Card. Se aplica como borde/acento y en hover.	Optional
backgroundColor	string (HEX)	Color de fondo visual del Card.	Optional
textColor	string (HEX)	Color de texto en title del Card.	Optional

Proptitle

Tipostring

DescripciónTítulo principal del Card

Required

Propdescription

Tipostring

DescripciónTexto descriptivo del contenido (requerido si no se usan children)

Optional

Propchildren

TipoReactNode

DescripciónContenido personalizado del Card (requerido si no hay description)

Optional

Propimage

Tipostring

DescripciónURL de una imagen decorativa superior

Optional

PropimageAlt

Tipostring

DescripciónTexto alternativo accesible para la imagen

Optional

Propsize

Tiposm | md | lg

DescripciónDefine el ancho máximo del Card

Optional

Propactions

TipoCardAction[label: string; onClick: () => void; variant?: "primary" | "secondary"; color?: string;] (max 2)

DescripciónAcciones configurables mostradas como botones

Optional

PropaccentColor

Tipostring (HEX)

DescripciónColor de énfasis visual del Card. Se aplica como borde/acento y en hover.

Optional

PropbackgroundColor

Tipostring (HEX)

DescripciónColor de fondo visual del Card.

Optional

ProptextColor

Tipostring (HEX)

DescripciónColor de texto en title del Card.

Optional

Input

El componente Input permite capturar información del usuario de forma controlada, accesible y consistente. Soporta múltiples variantes y tipos de entrada, estados visuales, validaciones y manejo estricto de props, siendo una pieza fundamental en formularios, filtros y flujos de interacción.

Prop	Tipo	Descripción	Required
label	string	Etiqueta descriptiva y accesible del campo	Required
variant	input \| textarea \| select	Define el tipo de campo a renderizar	Optional
type	text \| password \| number \| color \| date	Tipo de input cuando variant es 'input'	Optional
value	string \| number	Valor controlado del campo	Optional
placeholder	string	Texto de ayuda cuando el campo está vacío	Optional
options	{ label: string; value: string }[]	Opciones disponibles cuando variant es 'select'	Optional
rows	number	Número de filas cuando variant es 'textarea'	Optional
disabled	boolean	Deshabilita la interacción del campo	Optional
required	boolean	Marca el campo como obligatorio	Optional
helperText	string	Texto informativo debajo del campo	Optional
error	string	Mensaje de error y estado visual de validación	Optional
onChange	(value: string) => void	Evento que se dispara al cambiar el valor	Required

Proplabel

Tipostring

DescripciónEtiqueta descriptiva y accesible del campo

Required

Propvariant

Tipoinput | textarea | select

DescripciónDefine el tipo de campo a renderizar

Optional

Proptype

Tipotext | password | number | color | date

DescripciónTipo de input cuando variant es 'input'

Optional

Propvalue

Tipostring | number

DescripciónValor controlado del campo

Optional

Propplaceholder

Tipostring

DescripciónTexto de ayuda cuando el campo está vacío

Optional

Propoptions

Tipo{ label: string; value: string }[]

DescripciónOpciones disponibles cuando variant es 'select'

Optional

Proprows

Tiponumber

DescripciónNúmero de filas cuando variant es 'textarea'

Optional

Propdisabled

Tipoboolean

DescripciónDeshabilita la interacción del campo

Optional

Proprequired

Tipoboolean

DescripciónMarca el campo como obligatorio

Optional

ProphelperText

Tipostring

DescripciónTexto informativo debajo del campo

Optional

Properror

Tipostring

DescripciónMensaje de error y estado visual de validación

Optional

ProponChange

Tipo(value: string) => void

DescripciónEvento que se dispara al cambiar el valor

Required