Knopf
components/bausteine/Knopf.jsxPrimär · zweit · klein · inaktiv
Zeiger 32 · Finger 44 · Kind 56
Der Handlungsknopf auf Karten und Flächen — schwarz für den einen Schritt, beige für den zweiten.
<Knopfreihe>
<Knopf art="primaer" onClick={ichFahre}>Ich fahre</Knopf>
<Knopf art="zweit">Später</Knopf>
</Knopfreihe>
<Knopf ziel="kind" zeichen="check">Fertig</Knopf>
Register Family Manager: kurz, zupackend, ein Verb — „Ich fahre“, „Tobias fragen“, „Übernehmen“, „Rückgängig“. Nie „OK“, nie „Abbrechen“ ohne Gegenstand.
Ein Knopf ist immer einzeilig. Knöpfe stehen in einer Knopfreihe: nebeneinander, wenn beide Platz haben, sonst untereinander in voller Breite — nie ein zweizeiliger Knopf, nie zwei ungleich breite Knöpfe untereinander. ziel="kind" gibt 56 px mit 16-px-Schrift, wo Kinder bedienen. inaktiv rechnet eigene Rollen statt Deckkraft.
Types (.d.ts)
/**
* Handlungsknopf. Primär schwarz mit hellem Text („Ich fahre“), Zweitknopf beige („Später“),
* Klein ohne Fläche für Nebenwege. Schriftgrad und Polster wachsen mit der Zielfläche.
*/
export interface KnopfProps {
art?: "primaer" | "zweit" | "klein";
/** Zielfläche: Zeiger 32 / 12,5 px, Finger 44 / 14 px, Kind 56 / 16 px. */
ziel?: "zeiger" | "finger" | "kind";
/** Sach-Rolle oder Lucide-Name eines Zeichens links im Knopf. */
zeichen?: string;
/** Inaktiv ist eine eigene Rolle, keine Deckkraft. */
inaktiv?: boolean;
/** Füllt die Breite - für iPhone-Karten. */
breit?: boolean;
/** Erlaubt Zeilenumbruch in der Beschriftung. Standard aus: ein Knopf ist einzeilig;
* wird die Reihe zu eng, stapelt die Knopfreihe die Knöpfe in voller Breite. */
umbruch?: boolean;
type?: "button" | "submit" | "reset";
children?: React.ReactNode;
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
style?: React.CSSProperties;
}
export function Knopf(props: KnopfProps): JSX.Element;
/** Die Knopfreihe: nebeneinander, wenn Platz ist, sonst untereinander in voller Breite. */
export interface KnopfreiheProps {
children?: React.ReactNode;
/** Mindestbreite je Knopf in px, ab der zwei nebeneinander passen. Standard 104. */
mindest?: number;
ausrichtung?: "mitte";
style?: React.CSSProperties;
}
export function Knopfreihe(props: KnopfreiheProps): JSX.Element;