Komponenten

Button

Alles mit einem einzigen Klick auslösen

Die Button-Komponente ist Ihre erste Wahl für interaktive Elemente, die Aktionen auslösen. Egal, ob Sie Overlays öffnen, Modals auslösen, zu Abschnitten scrollen oder benutzerdefinierte Verhaltensweisen ausführen möchten - mit dieser Komponente ist alles möglich. Dank der vollständigen visuellen Anpassung und der Unterstützung von Barrierefreiheit können Sie funktionale Schaltflächen erstellen, die perfekt auf Ihr Design und die Erwartungen der Benutzer abgestimmt sind.

Kombinieren Sie Leistung mit Einfachheit, indem Sie vordefinierte Aktionen konfigurieren und sie so gestalten, dass sie zu Ihrer Marke passen, ohne Code schreiben zu müssen.

Leistungsstarke Aktionsauslöser

  1. Flexible Interaktionen.
    Lösen Sie Overlays, Modals und mehr aus.

  2. Datengesteuert.
    Übergeben Sie Parameter, wie z. B. IDs

  3. Perfekt für komplexe Arbeitsabläufe.
    Verketten Sie bei Bedarf mehrere Aktionen.

Styling und Zugänglichkeit by Default

  1. Barrierefrei durch Design.
    Erfüllt die WCAG-Standards von Anfang an.

  2. Vollständig anpassbar.
    Entwerfen Sie ganz einfach komplexe Buttons.

  3. Konsistentes Theming.
    Globale oder komponentenspezifische Themes.

Anwendungsfälle

  • Modals oder Overlays öffnen (z. B. Kontaktformulare oder Menüs)

  • Scrollen zu Abschnitten oder Auslösen von Seitenübergängen

  • Umschalten von Elementen (z. B. Accordion, Dropdowns)

  • Als CTA-Schaltflächen über Seiten und Komponenten hinweg fungieren

    Integration in strukturierte Workflows für mehrstufige Interaktionen

Von einfachen Formularauslösern bis hin zu komplexen Schnittstelleninteraktionen bietet die Button-Komponente die nötige Flexibilität, um jede User Journey oder jeden Funktionsablauf zu unterstützen.

Konfigurationsoptionen und Funktionen

Die Button-Komponente ist mehr als nur ein klickbares Element, sie ist ein funktionsreicher, themebezogener Aktionsauslöser, der die Interaktion in Ihrem Projekt fördert.

Von Barrierefreiheit und Styling bis hin zu leistungsstarker Funktionslogik ist sie der perfekte Begleiter für eine saubere, effektive und dynamische UX.

Aktionen

In diesem Feld können Sie der Schaltfläche eine oder mehrere vordefinierte Funktionen zuweisen.

Jede Aktion besteht aus:

  • Funktion - Der auszulösende Aktionstyp (z. B. toggleOverlay, scrollToSection usw.)

  • Daten - Die Daten, die der Funktion in Objektform übergeben werden (z. B. { id: 'menu-overlay' })

Auf diese Weise haben Sie die vollständige Kontrolle über die Interaktionslogik und sind gleichzeitig einfach zu konfigurieren.

Aria Label

Eine Textzeichenfolge, die für Screen-Reader und unterstützende Technologien verwendet wird, um die Funktion der Schaltfläche zu beschreiben.

Sehr empfehlenswert für die Einhaltung der Barrierefreiheit, insbesondere wenn der visuelle Inhalt nicht selbsterklärend ist.

Content Bereich

Der visuelle Inhalt befindet sich innerhalb der Schaltfläche.

Dieser Inhalt kann aus einfachem Text, Symbolen oder sogar einer Kombination von Inhaltsblöcken bestehen, welchen Inhalt Sie auch immer in Ihrer Schaltfläche haben möchten um Nutzer zum Interagieren zu motivieren.

Komponenten Theme

Wendet die Theme-Einstellungen auf den gesamten Button-Wrapper an.

Verwenden Sie dies, um Abstände, Rahmen, Farben, Hover-Effekte und andere Designaspekte des Erscheinungsbildes der Schaltfläche zu verwalten.