Componentes

Botones

Componente de acción principal. Combina wb-btn con una variante y un modificador de tamaño opcional.

Variantes

<button class="wb-btn wb-btn-primary">Primary</button>
<button class="wb-btn wb-btn-secondary">Secondary</button>
<button class="wb-btn wb-btn-outline">Outline</button>
<button class="wb-btn wb-btn-ghost">Ghost</button>
<button class="wb-btn wb-btn-danger">Danger</button>
<button class="wb-btn wb-btn-success">Success</button>

Tamaños

<button class="wb-btn wb-btn-primary wb-btn-sm">Pequeño</button>
<button class="wb-btn wb-btn-primary">Normal</button>
<button class="wb-btn wb-btn-primary wb-btn-lg">Grande</button>

Estados

<button class="wb-btn wb-btn-primary" disabled>Desactivado</button>
<button class="wb-btn wb-btn-primary wb-btn-loading">Cargando</button>
<a href="#" class="wb-btn wb-btn-outline">Botón enlace</a>

Badges

Pequeños indicadores de estado y etiquetas.

<span class="wb-badge">Estándar</span>
<span class="wb-badge wb-badge-primary">Primary</span>
<span class="wb-badge wb-badge-success">Success</span>
<span class="wb-badge wb-badge-warning">Warning</span>
<span class="wb-badge wb-badge-danger">Danger</span>
<span class="wb-badge wb-badge-info">Info</span>

Alertas

Mensajes de retroalimentación en línea. Agrega data-wb-dismiss="alert" para hacerlos cerrables.

<div class="wb-alert wb-alert-success">Registro guardado correctamente.</div>
<div class="wb-alert wb-alert-danger">Ocurrió un error.</div>
<div class="wb-alert wb-alert-warning">Tu plan vence en 3 días.</div>
<div class="wb-alert wb-alert-info">Hay una nueva versión disponible.</div>

Alerta cerrable

<div class="wb-alert wb-alert-info">
  Tienes 3 notificaciones sin leer.
  <button class="wb-alert-close" data-wb-dismiss="alert" aria-label="Cerrar">&times;</button>
</div>

Tarjetas

Contenedor de contenido de propósito general con cabecera, cuerpo y pie de página opcionales.

<div class="wb-card">
  <div class="wb-card-header">
    <h3 class="wb-card-title">Título de tarjeta</h3>
    <p class="wb-card-subtitle">Subtítulo opcional</p>
  </div>
  <div class="wb-card-body">
    Contenido aquí.
  </div>
  <div class="wb-card-footer">
    <button class="wb-btn wb-btn-primary wb-btn-sm">Guardar</button>
    <button class="wb-btn wb-btn-ghost wb-btn-sm">Cancelar</button>
  </div>
</div>

Tarjetas de estadísticas

Tarjetas KPI para dashboards — usa wb-stat dentro de un wb-card.

<div class="wb-card wb-stat">
  <div class="wb-stat-label">Total de usuarios</div>
  <div class="wb-stat-value">12.480</div>
  <div class="wb-stat-change wb-stat-up">+8,4 % este mes</div>
</div>

Formularios

Campos de texto, selects, checkboxes, radios, switches y textarea.

Campos de texto

<div class="wb-field">
  <label class="wb-label">Nombre completo</label>
  <input type="text" class="wb-input" placeholder="Ana García">
</div>

<div class="wb-field">
  <label class="wb-label">Correo electrónico</label>
  <input type="email" class="wb-input" placeholder="ana@ejemplo.com">
  <p class="wb-field-hint">Nunca compartiremos tu correo.</p>
</div>

<!-- Estado de error -->
<div class="wb-field">
  <label class="wb-label">Campo inválido</label>
  <input type="text" class="wb-input is-invalid" value="valor inválido">
  <p class="wb-field-error">Este campo es obligatorio.</p>
</div>

Select & Textarea

<div class="wb-field">
  <label class="wb-label">Estado</label>
  <select class="wb-select">
    <option>Activo</option>
    <option>Inactivo</option>
  </select>
</div>

<div class="wb-field">
  <label class="wb-label">Notas</label>
  <textarea class="wb-textarea" rows="3"></textarea>
</div>

Checkboxes, Radios & Switch

<label class="wb-check"><input type="checkbox"> Activar notificaciones</label>
<label class="wb-radio"><input type="radio" name="r1"> Opción A</label>

<!-- Toggle switch -->
<label class="wb-switch-label">
  <input type="checkbox" class="wb-switch" checked>
  <span>Activo</span>
</label>

Tablas

Tablas de datos responsivas con modificadores de filas alternas y hover opcionales.

<table class="wb-table wb-table-striped">
  <thead>
    <tr><th>Nombre</th><th>Rol</th><th>Estado</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Chen</td>
      <td>Admin</td>
      <td><span class="wb-badge wb-badge-success">Activo</span></td>
    </tr>
  </tbody>
</table>

Modificadores: wb-table-striped · wb-table-hover · wb-table-bordered · wb-table-sm

Modal

Overlay de diálogo. Se abre con WBModal.open(id) o data-wb-toggle="modal".

<!-- Activador -->
<button class="wb-btn wb-btn-primary"
        data-wb-toggle="modal"
        data-wb-target="#mi-modal">Abrir modal</button>

<!-- Modal -->
<div class="wb-modal" id="mi-modal">
  <div class="wb-modal-backdrop" data-wb-dismiss="modal"></div>
  <div class="wb-modal-dialog">
    <div class="wb-modal-header">
      <h4 class="wb-modal-title">Confirmar acción</h4>
      <button class="wb-modal-close" data-wb-dismiss="modal">&times;</button>
    </div>
    <div class="wb-modal-body">
      ¿Realmente deseas continuar?
    </div>
    <div class="wb-modal-footer">
      <button class="wb-btn wb-btn-ghost" data-wb-dismiss="modal">Cancelar</button>
      <button class="wb-btn wb-btn-primary">Confirmar</button>
    </div>
  </div>
</div>

API de JS

WBModal.open('mi-modal');
WBModal.close('mi-modal');

Drawer

Panel lateral superpuesto con trampa de foco. Soporta derecha, izquierda, arriba y abajo.

<!-- Activador -->
<button data-wb-toggle="drawer" data-wb-target="#mi-drawer">Abrir</button>

<!-- Drawer (derecha por defecto) -->
<div class="wb-drawer wb-drawer-right" id="mi-drawer">
  <div class="wb-drawer-backdrop" data-wb-dismiss="drawer"></div>
  <div class="wb-drawer-panel">
    <div class="wb-drawer-header">
      <h4 class="wb-drawer-title">Título del panel</h4>
      <button class="wb-drawer-close" data-wb-dismiss="drawer">&times;</button>
    </div>
    <div class="wb-drawer-body">
      Contenido del drawer aquí.
    </div>
  </div>
</div>

<!-- Variantes de posición -->
<div class="wb-drawer wb-drawer-left"   id="izquierda-drawer">...</div>
<div class="wb-drawer wb-drawer-top"    id="arriba-drawer">...</div>
<div class="wb-drawer wb-drawer-bottom" id="abajo-drawer">...</div>

<!-- Variantes de ancho -->
<div class="wb-drawer wb-drawer-right wb-drawer-sm">...</div>
<div class="wb-drawer wb-drawer-right wb-drawer-lg">...</div>
<div class="wb-drawer wb-drawer-right wb-drawer-xl">...</div>

Dropdown

Menú activado por clic. Se cierra al hacer clic fuera o con la tecla Escape.

<div class="wb-dropdown">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="dropdown">
    Acciones ▾
  </button>
  <div class="wb-dropdown-menu">
    <a href="#" class="wb-dropdown-item">Editar</a>
    <a href="#" class="wb-dropdown-item">Duplicar</a>
    <div class="wb-dropdown-divider"></div>
    <a href="#" class="wb-dropdown-item wb-dropdown-item-danger">Eliminar</a>
  </div>
</div>

Tabs

Panel de pestañas. JS gestiona el cambio; is-active marca la pestaña y el panel actuales.

<div class="wb-tabs" id="mis-tabs">
  <div class="wb-tab-list">
    <button class="wb-tab-item is-active" data-wb-tab="tab1">Resumen</button>
    <button class="wb-tab-item" data-wb-tab="tab2">Actividad</button>
  </div>
  <div class="wb-tab-panels">
    <div class="wb-tab-panel is-active" id="tab1">Contenido resumen</div>
    <div class="wb-tab-panel" id="tab2">Contenido actividad</div>
  </div>
</div>

Accordion

Áreas de contenido expandibles y colapsables.

<div class="wb-accordion">
  <div class="wb-accordion-item is-open">
    <button class="wb-accordion-trigger">¿Pregunta uno?</button>
    <div class="wb-accordion-body">Texto de respuesta aquí.</div>
  </div>
  <div class="wb-accordion-item">
    <button class="wb-accordion-trigger">¿Pregunta dos?</button>
    <div class="wb-accordion-body">Texto de respuesta aquí.</div>
  </div>
</div>

Toast

Notificaciones programáticas. Se muestran con WBToast.show().

// Simple
WBToast.show('Configuración guardada.');

// Con tipo
WBToast.show('¡Registro creado!', { type: 'success' });
WBToast.show('Algo salió mal.', { type: 'error' });
WBToast.show('Por favor revisa.', { type: 'warning' });

// Con duración personalizada (ms)
WBToast.show('Se cierra en 2s.', { duration: 2000 });

// Con posición (por defecto: top-right)
WBToast.show('¡Centro abajo!', { position: 'bottom-center' });

Valores de posición: top-right · top-center · top-left · bottom-center · bottom-left

Popover

Overlay anclado con contenido enriquecido. Soporta cuatro variantes de posicionamiento.

<div class="wb-popover-wrapper">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="popover">
    Haz clic
  </button>
  <div class="wb-popover wb-popover-top">
    <div class="wb-popover-title">Título del popover</div>
    <div class="wb-popover-body">Contenido del popover aquí.</div>
  </div>
</div>

<!-- Posiciones: wb-popover-top / -right / -bottom / -left -->

Tooltip

Tooltip simple de hover/foco mediante el atributo data-wb-tooltip.

<button data-wb-tooltip="Guarda tu trabajo"
        data-wb-tooltip-placement="top">
  Guardar
</button>

<!-- Posiciones: top (por defecto) / right / bottom / left -->

Avatar

Marcadores de posición de usuario con variantes de tamaño y fallback de iniciales.

JD AB CD EF

<!-- Iniciales -->
<span class="wb-avatar wb-avatar-xl">JD</span>
<span class="wb-avatar wb-avatar-lg">AB</span>
<span class="wb-avatar">CD</span>
<span class="wb-avatar wb-avatar-sm">EF</span>

<!-- Imagen -->
<img src="usuario.jpg" class="wb-avatar" alt="Usuario">

Paginación

Links de navegación entre páginas.

<nav class="wb-pagination">
  <a href="#" class="wb-page-item wb-page-prev">← Anterior</a>
  <a href="#" class="wb-page-item">1</a>
  <a href="#" class="wb-page-item is-active">2</a>
  <a href="#" class="wb-page-item">3</a>
  <span class="wb-page-item wb-page-ellipsis">…</span>
  <a href="#" class="wb-page-item wb-page-next">Siguiente →</a>
</nav>

Breadcrumb

Ruta de navegación jerárquica.

<nav class="wb-breadcrumb">
  <a href="#" class="wb-crumb">Inicio</a>
  <span class="wb-crumb-sep">/</span>
  <a href="#" class="wb-crumb">Usuarios</a>
  <span class="wb-crumb-sep">/</span>
  <span class="wb-crumb is-active">Alice Chen</span>
</nav>

Skeleton

Marcadores de carga para áreas de contenido.

<div class="wb-skeleton" style="height:1rem; width:60%"></div>
<div class="wb-skeleton" style="height:1rem; width:90%"></div>
<div class="wb-skeleton" style="height:1rem; width:75%"></div>
<div class="wb-skeleton" style="height:2.5rem; width:120px; border-radius:var(--wb-r-md)"></div>

Estado vacío

Marcador de posición cuando una lista o tabla no contiene datos.

<div class="wb-empty">
  <div class="wb-empty-icon">📭</div>
  <h4 class="wb-empty-title">No se encontraron resultados</h4>
  <p class="wb-empty-desc">Intenta ajustar tus filtros.</p>
  <button class="wb-btn wb-btn-primary wb-btn-sm">Restablecer filtros</button>
</div>

Spinner & Carga

Spinner en línea, barras de progreso y barra de carga para transiciones de página completa.

Spinner

<div class="wb-spinner wb-spinner-sm"></div>
<div class="wb-spinner"></div>
<div class="wb-spinner wb-spinner-lg"></div>

Barra de progreso

<div class="wb-progress-bar">
  <div class="wb-progress-fill" style="width:65%"></div>
</div>

<!-- Variantes semánticas -->
<div class="wb-progress-bar">
  <div class="wb-progress-fill wb-progress-success" style="width:40%"></div>
</div>

Divisor

Divisores horizontales, verticales o con etiqueta.

<!-- Simple -->
<div class="wb-divider"></div>

<!-- Con etiqueta -->
<div class="wb-divider wb-divider-labeled">
  <span>o continuar con</span>
</div>

<!-- Vertical (dentro de un contenedor flex) -->
<div class="wb-divider wb-divider-vertical"></div>

Lista

Lista vertical apilada de elementos.

<ul class="wb-list">
  <li class="wb-list-item is-active">Dashboard</li>
  <li class="wb-list-item">Usuarios</li>
  <li class="wb-list-item">Reportes</li>
</ul>

<!-- Modificadores: wb-list-flush · wb-list-compact · wb-list-numbered -->

Barra de filtros

Fila de búsqueda y filtrado para tablas de datos.

<div class="wb-filter-bar">
  <div class="wb-search-bar">
    <svg class="wb-search-icon">...</svg>
    <input type="search" class="wb-search-input" placeholder="Buscar…">
  </div>
  <select class="wb-select">...</select>
  <button class="wb-btn wb-btn-outline wb-btn-sm">Exportar</button>
</div>

<!-- Filter chips -->
<span class="wb-filter-chip is-active">Todos</span>
<span class="wb-filter-chip">Activos</span>
<span class="wb-filter-chip">Pendientes</span>

Menú de acciones

Barra de herramientas con botones de acción y pills de estado para filas o encabezados de tablas.

<div class="wb-action-group">
  <button class="wb-action-btn">Editar</button>
  <button class="wb-action-btn">Vista previa</button>
  <button class="wb-action-btn wb-action-btn-danger">Eliminar</button>
</div>

<!-- Status pills -->
<span class="wb-status-pill wb-status-active">Activo</span>
<span class="wb-status-pill wb-status-pending">Pendiente</span>
<span class="wb-status-pill wb-status-inactive">Inactivo</span>