Zum Inhalt springen
UI Kit
Accent

Button Components für React und Tailwind

Buttons, Groups und Toggles.

6 Components · 20 Variants
Kategorie wechseln

Sechs Components für jede Art von Klick

Buttons tragen jede Aktion einer Seite, sie brauchen deshalb eine klare Rangfolge. Die sechs Components hier teilen einen Satz an Stilen und Größen, ein Button im Hero, im Dialog und in der Tabelle sieht also aus wie aus einem Guss.

Der Knopf hat fünf Stile von Primary bis Ghost, drei Größen, Icons und einen Ladezustand, dazu neutrale Anmelde-Buttons ohne fremde Logos. Die Knopfgruppe verbindet Buttons zu einem Bedienelement oder einem geteilten Knopf mit Menü. Der Icon-Knopf ist für Aktionen, die nur ein Icon sind, und verlangt ein Label. Der Umschalter deckt gedrückte Zustände und eine segmentierte Auswahl ab, der Kopierknopf kopiert einen Wert und sagt es an, der Ladeknopf behält seine Breite und blockt Doppelklicks.

Nutze einen Primary-Button je Ansicht, alles andere ist Secondary oder Ghost. Schreib Labels als Verben, die sagen, was passiert, etwa Änderungen speichern. Links, die irgendwohin führen, bleiben Links, Buttons tun etwas. Mit href rendern die Components das richtige Element.

Auf dieser Seite

Alle Components dieser Kategorie. Wähle eine, um zu ihren Variants zu springen.

button

Knopf

Fünf Stile, drei Größen, Icons, Laden, Gruppen, Icon-Knöpfe und neutrale Anmeldeknöpfe.

Props und Details · Knopf

Stile

Eine Hauptaktion je Ansicht, die anderen treten zurück. Ein Druck senkt den Knopf und hinterlässt ein Licht an der Druckstelle, die Hauptaktion folgt leicht der Maus.

Größen

Klein 36 px, mittel 44 px, groß 48 px. Mittel und groß erfüllen das Tap-Ziel von 44 px.

Mit Icons

Icons vorne benennen das Objekt, Icons hinten zeigen den Weg und rücken beim Hovern ein Stück.

Laden

Der Spinner wird zum gezeichneten Haken, die Breite gleitet zwischen den Texten, ein Fehler schüttelt einmal. Doppelklicks sind geblockt.

Gruppen

Verbundene Knöpfe teilen sich eine Kante, ein geteilter Knopf hält verwandte Aktionen einen Klick entfernt.

Icon-Knöpfe

Eckig oder rund, mit Pflicht-Label und optionaler Zahl. Drück die Glocke, die Zahl springt auf.

Neutrale Anmeldung

Optionen über die volle Breite für die Anmeldung, ohne fremde Logos gezeichnet. Eigene Anbieterzeichen dort einsetzen, wo die Rechte vorliegen.

button-group

Knopfgruppe

Knöpfe zu einem Bedienelement verbunden, als Reihe, Stapel oder geteilter Knopf mit Menü.

Props und Details · Knopfgruppe

Verbunden

Eine gemeinsame Kante, außen rund, innen eckig. Eine feine Akzentlinie gleitet zum Knopf unter der Maus oder im Fokus.

Geteilter Knopf

Die wahrscheinliche Aktion vorne, die Alternativen hinter dem Pfeil. Das Menü geht mit den Pfeiltasten.

Gestapelt

Dieselben Regeln auf der senkrechten Achse, etwa zum Umsortieren oder als seitliche Leiste.

icon-button

Icon-Knopf

Knöpfe, die nur ein Icon sind, mit Pflicht-Label, vier Größen, fünf Stilen und Zähler.

Props und Details · Icon-Knopf

Stile und Größen

Kleine Größen behalten über einen unsichtbaren Rand eine Trefferfläche von 44 px.

Zahl und Punkt

Die Zahl gehört zum zugänglichen Namen, ein Punkt markiert Neues. Zahlen springen auf und bei jeder Änderung erneut, drück die erste Glocke.

Im Einsatz

Eine Dateizeile mit ruhigen Aktionen und Tooltips, die jede benennen.

toggle

Umschalter

Knöpfe, die gedrückt bleiben, Gruppen für einen oder mehrere Werte und ein Segment-Schalter mit gleitendem Daumen.

Props und Details · Umschalter

Segmentiert

Ein Wert aus wenigen. Der Daumen gleitet mit leichtem Überschwingen, Pfeiltasten bewegen ihn, die Gruppe ist ein Tab-Stopp.

Werkzeugleiste

Mehrere Werte zugleich fürs Format, ein Wert für die Ausrichtung mit gleitender Markierung. Probier es, der Satz folgt.

Einzelne Umschalter

Ein Knopf, zwei Zustände, angesagt über aria-pressed. Ruhig oder umrandet.

copy-button

Kopierknopf

Kopiert einen Wert mit einem Klick, das Icon wird zum Haken und eine Live-Region sagt es an.

Props und Details · Kopierknopf

Knöpfe

Als Icon oder mit Text. Das Kopier-Icon dreht weg, der Haken zeichnet sich, die Wörter tauschen nach oben ohne Sprung.

Kopierfelder

Nur lesbare Werte mit Kopierknopf für Links, Schlüssel, Befehle und Bankdaten. Ein Licht läuft über das Kopierte.

loading-button

Ladeknopf

Ein Knopf, der zeigt, dass er arbeitet, seine Breite hält, Doppelklicks blockt und Erfolg oder Fehler meldet.

Props und Details · Ladeknopf

Zustände

Bereit, lädt mit oder ohne Text, Erfolg und Fehler. Der Spinner schließt sich zum gezeichneten Haken, Fehler sagen, was als Nächstes zu tun ist.

Mit Promise

onClick gibt ein Promise zurück, der Knopf folgt ihm von selbst. Die Breite gleitet zwischen den Texten, ein Fehlschlag schüttelt einmal. Klicken, um beide Ausgänge zu sehen.

Ähnliche Components

Mehr aus Elements, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Buttons stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert