Catálogo

Los componentes del design system con instancias reales, estados y variantes. Agrupados por categoría, con ancla directa a cada uno.

Índice del catálogo 27 componentes en 5 secciones
Foundations
Overlays
Forms
Feedback
Layout

Foundations

Los bloques básicos de toda pantalla. Accesibles desde el primer PR — ARIA + teclado.

Button

5 variantes (primary / secondary / ghost / danger / link) · 4 tamaños · estados loading, disabled, iconOnly.

Input

Campo de texto con label, helper, error, prefix / suffix, icon slots y tipografía mono opt-in.

13 caracteres · persona física o moral
Folio duplicado — ya existe FOL-00158

Card

4 variantes (default / muted / elevated / outlined) con slots CardHeader / CardBody / CardFooter y modo interactive.

Marzo · 2026
Ingresos del mes
$482,150.00
+12.4% vs. mes anterior
Al corte de hoy
Por cobrar
$98,300.00
3 facturas vencidas
CSD próximo a vencer
8 días
El certificado expira el 14 de junio. Renueva antes para no detener la facturación.

Badge

5 intents (success / warning / danger / info / neutral) · 3 variantes (soft / outline / solid) · modos dot y count.

TimbradaPendienteRechazadaBorradorArchivada
softoutlinesolid
31299+

Overlays

Dialogs, toasts, dropdowns, popovers, tooltips. Portales, focus-trap, Esc y click-outside cierran cuando aplica.

Dialog

Modal con focus trap, Esc / click-outside cierran, variante danger para cancelaciones de CFDI y similares.

Toast

API imperativa vía useToast(). Duración adaptada por variante; danger/warning usan aria-live="assertive".

Dropdown

Menu contextual con keyboard completo, typeahead, separadores, labels de grupo y items destructivos.

Popover

Panel flotante rico (no-menu) para filtros, previews y formularios cortos. Trap de foco opt-in cuando hay inputs dentro.

Tooltip

Hint textual en hover / focus. 4 lados con flip automático. No aparece en touch devices (regla dura del iter 2).

FOL-00158

Forms

Label, Textarea, Select, Checkbox, Radio, Switch con keyboard navigation completo y labels accesibles por defecto.

Label

Standalone para controles que no son el Input del DS. Soporta required (asterisco visible + texto SR) y error para tinte danger.

Textarea

Multi-línea con resize controlado (vertical / none) y contador visible opcional cuando hay maxLength, con tintes warning / danger al acercarse al límite.

Solo visible para el equipo interno.
74/280
0/300

Select

Combobox accesible con listbox portaled, typeahead, y búsqueda opt-in para catálogos largos (régimen fiscal, uso CFDI, etc.).

Checkbox

Controlled / uncontrolled, soporte indeterminate como estado visual (no lógico), CheckboxGroup con label.

Al timbrar

Radio

Exige RadioGroup padre. Roving tabindex WAI-ARIA APG. Arrow keys navegan y seleccionan simultáneamente.

Uso del CFDI
Periodicidad

Switch

Toggle on/off — distinto de Checkbox (Checkbox marca elección, Switch activa un comportamiento). role="switch" + anuncio "encendido/apagado" al screen reader.

Feedback

Señales al usuario sobre el estado del sistema — persistentes (Alert), determinadas (Progress) o placeholders de carga (Skeleton).

Alert

Banner inline persistente — vive en la superficie hasta resolverse. Contraste con Toast (transitorio). 4 variantes + onDismiss opcional.

Nueva versión del Anexo 20
El SAT publicó la guía 2026-R1 — ya la incorporamos al timbrado.

Progress

Barra determinada con role="progressbar" + ARIA values. 4 variantes semánticas (primary / success / warning / danger) y 2 tamaños.

Timbrado de marzo68%
Onboarding del tenant3/8
Almacenamiento usado92%
Llamadas al SAT (ventana 1 min)98%

Skeleton

Placeholder con animación shimmer para estados de carga — evita layout shift. 3 variantes (text / rectangle / circle) y count para listas.

Cargando…
Cargando…
Cargando…
Cargando…
Lista de 5 renglones (count=5)
Cargando…

Layout

Primitivos reusables del chrome — separadores, avatars, tabs, collapsibles, íconos y barras de navegación que se usan dentro de cualquier pantalla.

Separator

Línea divisoria horizontal o vertical. Por default decorativa (role="none") — opcionalmente semántica con decorative= para exponer role="separator".

Datos del emisor

Datos del receptor

BorradorPendienteTimbrada

Avatar

Identidad visual compacta. Si falla la imagen cae a iniciales del fallback, y sin ni src ni fallback muestra icono genérico. 3 tamaños.

AGAGAG
MLJPATCR

Tabs

Segmented horizontal con paneles asociados — patrón WAI-ARIA APG (tablist/tab/tabpanel). Arrow keys navegan y seleccionan; Home/End saltan al primero/último enabled.

Folio FOL-00158 · Total $12,840.00 MXN
Timbrada el 19 · Abr · 2026

Collapsible

Disclosure widget (CollapsibleTrigger + CollapsibleContent) — botón con aria-expanded/aria-controls hacia el content. Controlled o uncontrolled.

Régimen 626 · Simplificado de Confianza · Uso CFDI G03 · Gastos en general · Método PUE · Pago en una exhibición.

IconPill

Toolbar translúcido con 3 botones agrupados (bell, help, search) en el orden oficial del header.

ScrollTabs

Segmented control con overflow-scroll horizontal y fades en los bordes. Counts opcionales en mono tabular.

Breadcrumb

Navegación jerárquica minimal. El último item es la ruta activa y no es interactivo.

EmptyState

4 intents para distintos escenarios: estructural, filtrado, onboarding pendiente, y error de sistema.

Sin facturas este mes

Cuando emitas la primera la verás aquí.

Sin coincidencias

Prueba con otro término o quita los filtros activos.

Configura tu CSD

Para timbrar facturas necesitamos tu Certificado de Sello Digital.

No pudimos cargar el listado

Reintenta en unos segundos. Si persiste, avísanos.

PageHeader

Encabezado de cada ruta — título, meta pill y scroll tabs. Vive en el contenido, no en el shell. Acepta slots opcionales para breadcrumbs y actions cuando la ruta los requiere.

Facturas emitidas