Halten-zum-Löschen-Button
Gedrückt halten zum Bestätigen: Der Button füllt sich rot, der Deckel des Papierkorbs zittert, und erst bei voller Leiste wird gelöscht.
Einstellungen
Code
<button class="uvq01-hld" type="button"><span class="f" aria-hidden="true"></span><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g class="lid"><path d="M4 7h16"/><path d="M9.5 7V4.5h5V7"/></g><path d="M6 7l1 13h10l1-13"/><path d="M10 11v5M14 11v5"/></svg></span><span class="w"><span class="t">Zum Löschen halten</span><span class="d">Gelöscht</span></span></button>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Zerstörerische Aktionen verdienen etwas Reibung, und dieser Button verlangt sie ganz körperlich: Man muss ihn gedrückt halten, während ein roter Balken von links nach rechts läuft und der Deckel des Papierkorb-Icons zu klappern beginnt. Wer zu früh loslässt, sieht den Balken zurücklaufen. Er funktioniert mit Maus, Touch und Tastatur und passt zum Löschen von Konten, Dateien oder Projekten.
Mit dem Regler für die Haltezeit stellst du ein, wie lange gedrückt werden muss; etwa anderthalb Sekunden wirken bewusst, ohne zu nerven. Lass die Hauptfarbe rot oder orange, damit das Risiko sofort lesbar ist, und setze einen normalen Abbrechen-Button daneben.