Schaltflächen

Drifting aura button

Drifting aura button: Ein sanft geprägtes, schräges Pad, das hinter seinen Rändern einen verschwommenen Farbstreifen hervorruft und den hellsten Teil um die Kontur gleiten lässt.

Drifting aura button verwenden

Drifting aura button verwendet das Vorschauformat „Inline“ mit der Theme-Einstellung „hell“.

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
`accent`	`color`	`#FF6A1F`	Keine weitere Grenze in den Metadaten.
`auraTint`	`color`	`#F5C542`	Keine weitere Grenze in den Metadaten.
`label`	`text`	`Hover me`	Bis zu 20 Zeichen
`blur`	`number`	`10`	Von 0 bis 24; Schrittweite 1
`driftSeconds`	`number`	`8`	Von 2 bis 20; Schrittweite 0.5
`skew`	`number`	`-5`	Von -12 bis 12; Schrittweite 1

Für welche Frameworks ist Drifting aura button verfügbar?

Drifting aura 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 Drifting aura button?

Die React-Metadaten nennen keine zusätzlichen npm-Abhängigkeiten neben React.

Welche Details zur Barrierefreiheit sind in Drifting aura button erkennbar?

Der React-Quellcode von Drifting aura 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 Drifting aura button reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Drifting aura button keine direkte Abfrage über useReducedMotion() oder matchMedia. 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 Drifting halo button von Fieldbook aus der Kategorie Schaltflächen.

2764Drifting halo buttonSchaltflächenEin dunkler Knopf, umgeben von einem etwas größeren Halo-Rahmen, in dem ein helles Akzentband endlos um den Umfang wandert und die Platte beim Schweben aufhellt und anhebt.

Standbild der UI-Komponente Glow halo button von Fieldbook aus der Kategorie Schaltflächen.

1828Glow halo buttonSchaltflächenEin Pillenknopf mit einem Duplikat seiner selbst, das dahinter verschwommen ist, so dass schwebend ein heller, farbiger Heiligenschein erblüht, während die Füllung langsam dahinschwebt.

Standbild der UI-Komponente Nested capsule button von Fieldbook aus der Kategorie Schaltflächen.

2720Nested capsule buttonSchaltflächenEin Pillenknopf, der aus drei ineinander verschachtelten Kapseln besteht, die sich beim Schweben in den äußeren Ring abflachen, während das Etikett zur Akzentfarbe überblendet.

Standbild der UI-Komponente Skewed shutter button von Fieldbook aus der Kategorie Schaltflächen.

2431Skewed shutter buttonSchaltflächenEin Knopf, dessen zwei gescherte Bahnen außerhalb seiner Kanten liegen und sich beim Schweben nach innen bewegen, wobei er sich hinter dem Etikett an einer diagonalen Naht schließt.

Standbild der UI-Komponente Skewed wipe swap button von Fieldbook aus der Kategorie Schaltflächen.

2703Skewed wipe swap buttonSchaltflächenEine Schaltfläche, deren Beschriftung beim Schweben oder Fokussieren wechselt, während ein geschertes Akzentfeld über die Vorderseite gewischt wird.

Standbild der UI-Komponente Slanted shutter button von Fieldbook aus der Kategorie Schaltflächen.

2692Slanted shutter buttonSchaltflächenZwei schräge Akzentfelder fallen von oben und unten herab und schließen über der Pille an einer diagonalen Naht, während das Etikett einmal aufgerollt und durch die Füllung umgedreht wird.