Warum der Button deaktiviert ist

Ein deaktivierter Button erklärt in einem Tooltip mit Warnstreifen, was fehlt, und bietet gleich eine Abkürzung zur Lösung.

Einstellungen

Hauptfarbe#f59e0b

Zweitfarbe#1f2937

Größe16px

Tempo1x

Text

Code

index.html

<div class="uvq08-dis" data-s="todo"><div class="cd"><p class="hd">Artikel veröffentlichen</p><ul><li class="ok"><i aria-hidden="true"></i><span>Titel und Zusammenfassung</span></li><li class="im"><i aria-hidden="true"></i><span>Titelbild</span><em>Fehlt</em></li></ul><div class="ft"><span class="wr pk"><button type="button" class="pb" aria-disabled="true" aria-describedby="uvq08-dis-n"><span class="a">Veröffentlichen</span><span class="b">Veröffentlicht</span></button><span class="tt"><span class="no"><span class="lk" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="10.5" width="14" height="10" rx="2.5"/><path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5"/></svg></span><span id="uvq08-dis-n">Das Titelbild fehlt</span><button type="button" class="fx">Bild hinzufügen</button></span><span class="ys" id="uvq08-dis-y">Bereit zum Veröffentlichen</span></span></span></div></div></div>

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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Tooltips

Alle ansehen: Tooltips

Tooltip mit Federeffekt

TooltipsHTML + CSS

Tooltip mit Farbverlauf

TooltipsHTML + CSS

Tooltip, der dem Cursor folgt

TooltipsHTML + CSS

Verzögerter Tooltip mit Unschärfe

TooltipsHTML + CSS

Tooltip auf Kreisbahn

TooltipsHTML + CSS

Tooltip mit Tastenkürzel

TooltipsHTML + CSS

Tooltip mit Vorschau

TooltipsHTML + CSS

Geteilter Tooltip

TooltipsHTML + CSS

Wofür du ihn nutzen kannst

Eine Veröffentlichungskarte, deren Button per aria-disabled deaktiviert bleibt und dadurch trotzdem fokussierbar ist und sich erklären kann. Beim Hovern oder Fokussieren nennt ein Tooltip mit gestreiftem Warnrand, was fehlt, und bietet direkt einen Button zur Behebung. Ein Klick auf den deaktivierten Button lässt ihn wackeln und stupst den Tooltip an. Danach wird er aktiv und bestätigt die Veröffentlichung.

Die Hauptfarbe bildet Warnstreifen und Aktion, die Zweitfarbe das dunkle Band dazwischen. Nutze das Muster für jede blockierte Aktion, vom Checkout bis zu Einstellungen, damit Menschen verstehen, warum etwas nicht geht, statt zu raten.