Schaltflächen

Uppercase action button

Uppercase action button: Eine kompakte gefüllte Aktionsschaltfläche mit einer verfolgten Großbuchstabenbeschriftung, eckigen Ecken und leisen, nur gefüllten Hover- und Gedrückt-Zuständen für Symbolleisten und Panel-Header.

Uppercase action button verwenden

Uppercase action 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`	`Manage plan`	Bis zu 28 Zeichen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`tracking`	`number`	`0.5`	Von 0 bis 2; Schrittweite 0.1
`uppercase`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`disabled`	`boolean`	`false`	Keine weitere Grenze in den Metadaten.

Für welche Frameworks ist Uppercase action button verfügbar?

Uppercase action 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 Uppercase action button?

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

Welche Details zur Barrierefreiheit sind in Uppercase action button erkennbar?

Der React-Quellcode von Uppercase action button enthält: native Elemente (button). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Uppercase action button reduzierte Bewegung?

Die Quellcode-Analyse fand in der index.tsx von Uppercase action 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 Lifting share chip von Fieldbook aus der Kategorie Schaltflächen.

2480Lifting share chipSchaltflächenEin kleiner fester Chip mit einem Glyphen und einer kurzen Kappenbeschriftung, der sich beim Schweben um einige Pixel anhebt und weicher wird, sich beim Drücken einrastet und ein gefülltes Glyph umschalten kann.

Standbild der UI-Komponente Arrow to label pill von Fieldbook aus der Kategorie Schaltflächen.

2469Arrow to label pillSchaltflächenEin runder Chevron-Knopf, der sich beim Schweben in eine breite beschriftete Pille ausdehnt und die Markierung gegen ein Wort eintauscht, während die flache Füllung zu einer Rampe mit zwei Stopps wird.

Standbild der UI-Komponente Color swap play button von Fieldbook aus der Kategorie Schaltflächen.

1849Color swap play buttonSchaltflächenEine Spielpille in Großbuchstaben, die beim Schweben ihre Grund- und Textfarben wechselt und sich anhebt, während ihr farbiges Leuchten dunkel wird.

Standbild der UI-Komponente Elevated chip button von Fieldbook aus der Kategorie Schaltflächen.

2534Elevated chip buttonSchaltflächenEin blasser, abgerundeter Chip, der auf gestapelten weichen Schatten ruht, der sich beim Schweben zum Akzent hin verfärbt und beim Drücken auf einen tieferen Schatten mit einer Akzentkontur absinkt.

Standbild der UI-Komponente Hard Shadow Button von Fieldbook aus der Kategorie Schaltflächen.

1864Hard Shadow ButtonSchaltflächenEine Schaltfläche mit dickem Umriss, die sich beim Schweben von ihrem festen versetzten Schatten löst und beim Klicken wieder hineingedrückt wird.

Standbild der UI-Komponente Inset sheen button von Fieldbook aus der Kategorie Schaltflächen.

2699Inset sheen buttonSchaltflächenEine blasse Utility-Taste mit einem haarfeinen Rand, einer Hervorhebung von einem Pixel am oberen Rand und einem gedrückten Zustand, der den Glanz nach innen dreht.