Design System
Playground Zur Vorlage

Elemente · AktionButton

Element · 4 Varianten · 3 Größen

Button

elements/Button.astro

Pille, nicht Rechteck — außer Ghost: unterstrichen, ohne Kante, allein. Primary und Secondary: Fläche wischt schräg auf Hover. Im Fließtext: nw-link, nicht den Button.

Variante Ruhe Einsatz
primary Pille, Wisch nach Oliv Die eine Handlung
secondary Pille, Kante, Wisch füllt Zweite Handlung neben Primary
ghost Unterstrich, keine Pille Leise, allein, nicht im Satz
muted Granit-Stimme Zurücktreten, später, abbrechen

Props

Name Typ Default Notiz
variant "primary" | "secondary" | "ghost" | "muted" "primary" Ghost allein, nicht im Satz. Primary/Secondary: Wisch.
size "small" | "base" | "large" "base" Small, Base, Large. Hero und CTA: large.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
text string — Auch aria-label bei Icon-only.
href string? — Setzt <a>, sonst <button>.
icon "arrow" | "arrow-up" | "plus"? — Stroke 1.5. Small 16, Base 20, Large 24.
iconPosition "left" | "right" | "only" "right" only = Kreis, mind. 44px.
disabled boolean? false Leiser, keine Handlung.
loading boolean? false Spinner statt Icon. 
<Button variant="primary" size="large" text="Gespräch buchen" href="/kontakt" />
<Button variant="primary" size="large" icon="arrow" text="Arbeiten ansehen" />
<Button variant="primary" icon="plus" iconPosition="only" text="Hinzufügen" />
<Button variant="ghost" size="large" text="Weiterlesen" />

Nacht

Gespräch buchen Leistungen Weiterlesen Später

Paper

Gespräch buchen Leistungen Weiterlesen Später

Größen · Primary

Small Base Large

Größen · Ghost

Small Base Large

Icon rechts · Large

Arbeiten ansehen Alle Arbeiten
Arbeiten ansehen Alle Arbeiten

Nur Icon · Small, Base, Large

Zustände

Default

Im Satz · kein Button

Wir beginnen mit einem Gespräch, nicht mit Folien. Mehr über den Ansatz

Do’s

  • Eine Primary pro Fläche.
  • Hero und Cover: size large.
  • Ghost unterstrichen, 1px, Offset — allein, nicht im Satz.
  • Im Fließtext: Klasse nw-link, nicht den Button.
  • surface passend zur Fläche setzen.

Don’ts

  • Versalien oder Sperrung.
  • Unterstrich auf Primary, Secondary, Muted.
  • Oliv als Ruhefläche. Oliv nur am Hover.
  • Zwei Primaries nebeneinander.
  • Ghost in Lead oder Base. Das ist ein Link.
  • Größen mischen oder neue Stufen erfinden.