Komponenten

Buttons

Zentrale Aktionskomponente. Kombiniere wb-btn mit einer Variante und einem optionalen Größen-Modifier.

Varianten

<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>

Größen

<button class="wb-btn wb-btn-primary wb-btn-sm">Klein</button>
<button class="wb-btn wb-btn-primary">Standard</button>
<button class="wb-btn wb-btn-primary wb-btn-lg">Groß</button>

Zustände

<button class="wb-btn wb-btn-primary" disabled>Deaktiviert</button>
<button class="wb-btn wb-btn-primary wb-btn-loading">Laden</button>
<a href="#" class="wb-btn wb-btn-outline">Link-Button</a>

Badges

Kleine Statusindikatoren und Beschriftungen.

<span class="wb-badge">Standard</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>

Alerts

Inline-Feedback-Meldungen. Füge data-wb-dismiss="alert" hinzu, um sie schließbar zu machen.

<div class="wb-alert wb-alert-success">Datensatz erfolgreich gespeichert.</div>
<div class="wb-alert wb-alert-danger">Ein Fehler ist aufgetreten.</div>
<div class="wb-alert wb-alert-warning">Dein Plan läuft in 3 Tagen ab.</div>
<div class="wb-alert wb-alert-info">Eine neue Version ist verfügbar.</div>

Schließbarer Alert

<div class="wb-alert wb-alert-info">
  Du hast 3 ungelesene Benachrichtigungen.
  <button class="wb-alert-close" data-wb-dismiss="alert" aria-label="Schließen">&times;</button>
</div>

Karten

Allgemeiner Inhalts-Container mit optionalem Header, Body und Footer.

<div class="wb-card">
  <div class="wb-card-header">
    <h3 class="wb-card-title">Kartentitel</h3>
    <p class="wb-card-subtitle">Optionaler Untertitel</p>
  </div>
  <div class="wb-card-body">
    Karteninhalt hier.
  </div>
  <div class="wb-card-footer">
    <button class="wb-btn wb-btn-primary wb-btn-sm">Speichern</button>
    <button class="wb-btn wb-btn-ghost wb-btn-sm">Abbrechen</button>
  </div>
</div>

Stat-Karten

Dashboard-KPI-Karten — verwende wb-stat innerhalb einer wb-card.

<div class="wb-card wb-stat">
  <div class="wb-stat-label">Gesamtnutzer</div>
  <div class="wb-stat-value">12.480</div>
  <div class="wb-stat-change wb-stat-up">+8,4 % diesen Monat</div>
</div>

Formulare

Eingabefelder, Selects, Checkboxen, Radios, Switches und Textarea.

Texteingaben

<div class="wb-field">
  <label class="wb-label">Vollständiger Name</label>
  <input type="text" class="wb-input" placeholder="Jana Müller">
</div>

<div class="wb-field">
  <label class="wb-label">E-Mail</label>
  <input type="email" class="wb-input" placeholder="jana@beispiel.de">
  <p class="wb-field-hint">Wir geben deine E-Mail niemals weiter.</p>
</div>

<!-- Fehlerzustand -->
<div class="wb-field">
  <label class="wb-label">Ungültiges Feld</label>
  <input type="text" class="wb-input is-invalid" value="ungültiger Wert">
  <p class="wb-field-error">Dieses Feld ist erforderlich.</p>
</div>

Select & Textarea

<div class="wb-field">
  <label class="wb-label">Status</label>
  <select class="wb-select">
    <option>Aktiv</option>
    <option>Inaktiv</option>
  </select>
</div>

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

Checkboxen, Radios & Switch

<label class="wb-check"><input type="checkbox"> Benachrichtigungen aktivieren</label>
<label class="wb-radio"><input type="radio" name="r1"> Option A</label>

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

Tabellen

Responsive Datentabellen mit optionalen gestreiften und Hover-Modifikatoren.

<table class="wb-table wb-table-striped">
  <thead>
    <tr><th>Name</th><th>Rolle</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Chen</td>
      <td>Admin</td>
      <td><span class="wb-badge wb-badge-success">Aktiv</span></td>
    </tr>
  </tbody>
</table>

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

Modal

Dialog-Overlay. Geöffnet über WBModal.open(id) oder data-wb-toggle="modal".

<!-- Auslöser -->
<button class="wb-btn wb-btn-primary"
        data-wb-toggle="modal"
        data-wb-target="#mein-modal">Modal öffnen</button>

<!-- Modal -->
<div class="wb-modal" id="mein-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">Aktion bestätigen</h4>
      <button class="wb-modal-close" data-wb-dismiss="modal">&times;</button>
    </div>
    <div class="wb-modal-body">
      Möchtest du wirklich fortfahren?
    </div>
    <div class="wb-modal-footer">
      <button class="wb-btn wb-btn-ghost" data-wb-dismiss="modal">Abbrechen</button>
      <button class="wb-btn wb-btn-primary">Bestätigen</button>
    </div>
  </div>
</div>

JS-API

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

Drawer

Seitliches Panel-Overlay mit Fokus-Falle. Unterstützt rechts, links, oben und unten.

<!-- Auslöser -->
<button data-wb-toggle="drawer" data-wb-target="#mein-drawer">Öffnen</button>

<!-- Drawer (rechts standardmäßig) -->
<div class="wb-drawer wb-drawer-right" id="mein-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">Panel-Titel</h4>
      <button class="wb-drawer-close" data-wb-dismiss="drawer">&times;</button>
    </div>
    <div class="wb-drawer-body">
      Drawer-Inhalt hier.
    </div>
  </div>
</div>

<!-- Positionsvarianten -->
<div class="wb-drawer wb-drawer-left"   id="links-drawer">...</div>
<div class="wb-drawer wb-drawer-top"    id="oben-drawer">...</div>
<div class="wb-drawer wb-drawer-bottom" id="unten-drawer">...</div>

<!-- Breitenvarianten -->
<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

Klick-ausgelöstes Menü. Schließt bei Außenklick und Escape-Taste.

<div class="wb-dropdown">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="dropdown">
    Aktionen ▾
  </button>
  <div class="wb-dropdown-menu">
    <a href="#" class="wb-dropdown-item">Bearbeiten</a>
    <a href="#" class="wb-dropdown-item">Duplizieren</a>
    <div class="wb-dropdown-divider"></div>
    <a href="#" class="wb-dropdown-item wb-dropdown-item-danger">Löschen</a>
  </div>
</div>

Tabs

Tabs-Panel. JS übernimmt das Umschalten; is-active markiert den aktuellen Tab und das Panel.

<div class="wb-tabs" id="meine-tabs">
  <div class="wb-tab-list">
    <button class="wb-tab-item is-active" data-wb-tab="tab1">Übersicht</button>
    <button class="wb-tab-item" data-wb-tab="tab2">Aktivität</button>
  </div>
  <div class="wb-tab-panels">
    <div class="wb-tab-panel is-active" id="tab1">Übersichtsinhalt</div>
    <div class="wb-tab-panel" id="tab2">Aktivitätsinhalt</div>
  </div>
</div>

Accordion

Ein- und ausklappbare Inhaltsbereiche.

<div class="wb-accordion">
  <div class="wb-accordion-item is-open">
    <button class="wb-accordion-trigger">Frage eins?</button>
    <div class="wb-accordion-body">Antworttext hier.</div>
  </div>
  <div class="wb-accordion-item">
    <button class="wb-accordion-trigger">Frage zwei?</button>
    <div class="wb-accordion-body">Antworttext hier.</div>
  </div>
</div>

Toast

Programmgesteuerte Benachrichtigungen. Angezeigt über WBToast.show().

// Einfach
WBToast.show('Einstellungen gespeichert.');

// Mit Typ
WBToast.show('Datensatz erstellt!', { type: 'success' });
WBToast.show('Etwas ist schiefgelaufen.', { type: 'error' });
WBToast.show('Bitte überprüfen.', { type: 'warning' });

// Mit benutzerdefinierter Dauer (ms)
WBToast.show('Schließt in 2s.', { duration: 2000 });

// Mit Position (Standard: top-right)
WBToast.show('Mitte unten!', { position: 'bottom-center' });

Positionswerte: top-right · top-center · top-left · bottom-center · bottom-left

Popover

Verankertes Overlay mit reichhaltigem Inhalt. Unterstützt vier Positionierungsvarianten.

<div class="wb-popover-wrapper">
  <button class="wb-btn wb-btn-outline" data-wb-toggle="popover">
    Klick mich
  </button>
  <div class="wb-popover wb-popover-top">
    <div class="wb-popover-title">Popover-Titel</div>
    <div class="wb-popover-body">Popover-Inhalt hier.</div>
  </div>
</div>

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

Tooltip

Einfacher Hover/Fokus-Tooltip über das data-wb-tooltip-Attribut.

<button data-wb-tooltip="Speichert deine Arbeit"
        data-wb-tooltip-placement="top">
  Speichern
</button>

<!-- Positionen: top (Standard) / right / bottom / left -->

Avatar

Benutzerbildplatzhalter mit Größenvarianten und Initialen-Fallback.

JD AB CD EF

<!-- Initialen -->
<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>

<!-- Bild -->
<img src="benutzer.jpg" class="wb-avatar" alt="Benutzer">

Pagination

Seitennavigationslinks.

<nav class="wb-pagination">
  <a href="#" class="wb-page-item wb-page-prev">← Zurück</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">Weiter →</a>
</nav>

Breadcrumb

Hierarchischer Navigationspfad.

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

Skeleton

Lade-Platzhalter für Inhaltsbereiche.

<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>

Leerer Zustand

Platzhalter, wenn eine Liste oder Tabelle keine Daten enthält.

<div class="wb-empty">
  <div class="wb-empty-icon">📭</div>
  <h4 class="wb-empty-title">Keine Ergebnisse gefunden</h4>
  <p class="wb-empty-desc">Versuche, deine Filter anzupassen.</p>
  <button class="wb-btn wb-btn-primary wb-btn-sm">Filter zurücksetzen</button>
</div>

Spinner & Laden

Inline-Spinner, Fortschrittsbalken und Ladebalken für seitenweite Übergänge.

Spinner

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

Fortschrittsbalken

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

<!-- Semantische Varianten -->
<div class="wb-progress-bar">
  <div class="wb-progress-fill wb-progress-success" style="width:40%"></div>
</div>

Trennlinie

Horizontale, vertikale oder beschriftete Trennlinien.

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

<!-- Beschriftet -->
<div class="wb-divider wb-divider-labeled">
  <span>oder weiter mit</span>
</div>

<!-- Vertikal (in einem Flex-Container) -->
<div class="wb-divider wb-divider-vertical"></div>

Listengruppe

Vertikal gestapelte Liste von Elementen.

<ul class="wb-list">
  <li class="wb-list-item is-active">Dashboard</li>
  <li class="wb-list-item">Benutzer</li>
  <li class="wb-list-item">Berichte</li>
</ul>

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

Filterleiste

Such- und Filterzeile für Datentabellen.

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

<!-- Filter-Chips -->
<span class="wb-filter-chip is-active">Alle</span>
<span class="wb-filter-chip">Aktiv</span>
<span class="wb-filter-chip">Ausstehend</span>

Aktionsmenü

Symbolleiste mit Aktions-Buttons und Status-Pills für Tabellenzeilen oder -header.

<div class="wb-action-group">
  <button class="wb-action-btn">Bearbeiten</button>
  <button class="wb-action-btn">Vorschau</button>
  <button class="wb-action-btn wb-action-btn-danger">Löschen</button>
</div>

<!-- Status-Pills -->
<span class="wb-status-pill wb-status-active">Aktiv</span>
<span class="wb-status-pill wb-status-pending">Ausstehend</span>
<span class="wb-status-pill wb-status-inactive">Inaktiv</span>