Komponenten

Buttons

Eindeutige Aktionen mit konsistenten Größen und einer klaren visuellen Hierarchie.

Verwendung

Beschrifte Buttons mit der Aktion, die sie auslösen. Die Beispiele auf dieser Seite zeigen die Darstellung und führen keine Aktion aus.

Standard-Button

blade

<gedisa:button>Button</gedisa:button>

Varianten

Outline ist der Standard. Primary hebt die wichtigste Aktion einer Ansicht hervor.

Outline und Primary

blade

<gedisa:button variant="outline">Abbrechen</gedisa:button>
<gedisa:button variant="primary">Speichern</gedisa:button>

Größen

GEDISA definiert vier Größen von sm bis xl. Nutze innerhalb einer Aktionsgruppe dieselbe Größe.

Small bis Extra Large

blade

<gedisa:button size="sm">Small</gedisa:button>
<gedisa:button size="md">Medium</gedisa:button>
<gedisa:button size="lg">Large</gedisa:button>
<gedisa:button size="xl">Extra Large</gedisa:button>

Zustände

Disabled kennzeichnet eine momentan nicht verfügbare Aktion. Erkläre den Grund im umgebenden Inhalt.

Deaktivierter Zustand

blade

<gedisa:button disabled>Speichern</gedisa:button>

Referenz

Diese Übersicht umfasst die gezeigten Eigenschaften. GEDISA reicht die Variante an den zugrunde liegenden Flux Button weiter.

Eigenschaft	Werte	Default
variant	hier gezeigt: outline, primary	`outline`
size	sm, md, lg, xl	`md`
disabled	HTML-Attribut	`nicht gesetzt`