Schaltflächen

Winged crest button

Winged crest button: Ein Knopf, der an einer breiten, geflügelten Wappensilhouette befestigt ist, die sich beim Schweben von der Mitte nach außen ausfüllt, während sich das Etikett umdreht und darunter ein breites Leuchten erblüht.

Winged crest button verwenden

Winged crest button verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`label`	`text`	`Play now`	Bis zu 18 Zeichen
`accent`	`color`	`#F5C542`	Keine weitere Grenze in den Metadaten.
`width`	`number`	`200`	Von 140 bis 320; Schrittweite 10
`fillMs`	`number`	`900`	Von 250 bis 2000; Schrittweite 50
`bloom`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Winged crest button verfügbar?

Winged crest button ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Winged crest button?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Winged crest button erkennbar?

Der React-Quellcode von Winged crest button enthält: native Elemente (button); Attribute und Ereignisbehandler (aria-hidden). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Winged crest button reduzierte Bewegung?

Winged crest button liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Diagonal wedge button von Fieldbook aus der Kategorie Schaltflächen.

2676Diagonal wedge buttonSchaltflächenEin quadratischer Knopf, der mit einem dreieckigen Keil gefüllt ist, der diagonal wächst, bis er das gesamte Gesicht bedeckt.

Standbild der UI-Komponente Bevel frame button von Fieldbook aus der Kategorie Schaltflächen.

2674Bevel frame buttonSchaltflächenEin Knopf mit quadratischem Rahmen, dessen beide Enden beim Schweben zu Punkten abgeschrägt sind und das Rechteck in ein sechsseitiges Abzeichen verwandeln.

Standbild der UI-Komponente Converging chevron button von Fieldbook aus der Kategorie Schaltflächen.

2684Converging chevron buttonSchaltflächenZwei pfeilförmige Platten fliegen von gegenüberliegenden Seiten ein, treffen in der Mitte des Knopfes zusammen und verschließen ihn hinter dem Etikett.

Standbild der UI-Komponente Diagonal blob flood button von Fieldbook aus der Kategorie Schaltflächen.

2538Diagonal blob flood buttonSchaltflächenEin umrissener Knopf, der von einem großen runden Klecks überflutet ist, der von der oberen Ecke diagonal nach innen gleitet und beim Halten dunkler wird.

Standbild der UI-Komponente Diagonal swipe button von Fieldbook aus der Kategorie Schaltflächen.

1850Diagonal swipe buttonSchaltflächenEin umrissener Knopf, der eine dünne, schräge Klinge hält, die sich aufrichtet und verbreitert, bis sie beim Schweben den Rahmen überschwemmt.

Standbild der UI-Komponente Dot flood button von Fieldbook aus der Kategorie Schaltflächen.

1632Dot flood buttonSchaltflächenEine umrissene Pille mit einem kleinen Punkt neben dem Etikett; Beim Schweben vergrößert sich der Punkt, bis er die gesamte Schaltfläche überflutet und die Beschriftung zu ihrem umgekehrten Zwilling wechselt.