Chips mit X zum Entfernen
Aktive Chips zeigen ein kleines X. Ein Klick darauf lässt den Chip schrumpfen und verschwinden, ein Button holt alle zurück.
Einstellungen
Code
<div class="uv-fcx"><button class="c on"><b>Alle</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c on"><b>Design</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Code</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Fotos</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="c"><b>Video</b><i class="x"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></i></button><button class="rs">Zurücksetzen</button></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.
Mehr aus Filter
Wofür du ihn nutzen kannst
Praktisch überall, wo Leute eine Themenliste aufräumen. Zum Beispiel in einer News-App, in der man Ressorts ausblendet, die man nie liest, oder beim Onboarding, wenn Interessen abgefragt werden und man unpassende einfach wegklickt. Das Schrumpfen wirkt gewollt und nicht wie ein Fehler. Gesucht wird so etwas oft als entfernbare Chips oder Tags mit X.
Lass immer einen Weg zurück offen, wie den Wiederherstellen-Button in der Demo. Entfernen ist in Ordnung, solange es nicht endgültig ist. Auf dem Handy braucht das X genug Fläche, und zwischen den Chips sollte Platz sein, damit niemand daneben tippt.