Komponenten

Jede Komponente live

Eigenständige React-Komponenten für deine Projekte. Jede Vorschau zeigt die echte Komponente: Bewege den Zeiger, klicke und tippe. Melde dich für Quellcode, Eigenschaften, Installation und die Versionen für Vue, Svelte, Astro und HTML an.

26 von 26

Focus halo button

1696Focus halo buttonSchaltflächenEine durchgehende Schaltfläche, die sich beim Bewegen des Mauszeigers in einen Umriss umwandelt und in dem Moment, in dem sie den Tastaturfokus erhält, zwei übereinanderliegende durchsichtige Ringe wachsen lässt.

Rotating face plate

1742Rotating face plateSchaltflächenEin Knopf, dessen beschriftete dunkle Platte sich um eine Ecke dreht und beim Betätigen größer wird, wodurch die darunter liegende Akzentplatte als vier Dreiecke sichtbar wird, dann beim Drücken kleiner wird und mit ihr die Farben wechselt.

Sweep invert button

1837Sweep invert buttonSchaltflächenEin Knopf in tiefem Marineblau, dessen helle Füllung vom rechten Rand ausgeht und das Etikett durch kurzes Drücken in den dunklen Ton umwandelt.

Color swap play button

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.

Outline invert button

1872Outline invert buttonSchaltflächenEin dunkler Schieferknopf, umgeben von einem warmen Umriss, dessen Rand beim Schweben alle Farben wechselt und bei wechselndem Leuchten ansteigt.

Invert Fill Button

1984Invert Fill ButtonSchaltflächenEine kleine umrandete Schaltfläche, die sich beim Schweben ausfüllt, während ihre Beschriftung zum entgegengesetzten Wert wechselt und Vorder- und Hintergrund sauber vertauscht.

Italic outline fill button

2174Italic outline fill buttonSchaltflächenEine ruhig umrandete Schaltfläche in Kursivschrift, die sich in eine durchgehende Akzentfüllung umwandelt, sobald ein Zeiger oder eine Tastatur sie erreicht.

Left Edge Fill Button

2378Left Edge Fill ButtonSchaltflächenEine weiche, abgerundete Platte, bei der beim Schweben ein farbiges Feld aus dem linken Rand herauswächst, um die gesamte Form auszufüllen und dabei das Etikett umzudrehen.

Offset outline stack

2392Offset outline stackSchaltflächenEine umrandete Knopfleiste, die wie ein kleiner Block Papier auf abgestuften Umrissschichten ruht; Hover schiebt das oberste Blatt auf den Stapel und dreht seine Füllung um.

Expanding disc mute toggle

2520Expanding disc mute toggleSchaltflächenEin rundes Symbol zum Umschalten, bei dem eine dunkle Scheibe von der Mitte aus wächst, das pastellfarbene Gesicht verschluckt und die Glyphe auf dem Weg darunter ins Helle verwandelt.

Invert on hover pill

2528Invert on hover pillSchaltflächenEine gefüllte Pille, die Füll- und Beschriftungsfarben austauscht und beim Schweben oder Tastaturfokus leicht anschwillt und beim Drücken unter ihre Ruhegröße schrumpft.

Nudge arrow invert button

2530Nudge arrow invert buttonSchaltflächenEine dunkle Pille in Großbuchstaben mit einem Pfeil am rechten Rand; Wenn Sie den Mauszeiger darüber bewegen, wird es zu einer blassen Oberfläche und bewegt den Pfeil nach vorne. Wenn Sie darauf drücken, blinkt eine warme Füllung auf.

Comb wipe invert button

2542Comb wipe invert buttonSchaltflächenZwei ineinandergreifende, gestreifte Kämme gleiten von oben und unten hinein, um eine schwarze Pille abzudecken, und drehen dabei das Etikett um.

Edge wipe invert

2597Edge wipe invertSchaltflächenEine umrandete Schaltfläche, deren Volltonfüllung von einer Kante nach innen verläuft und die Beschriftung umdreht, wenn sie darunter verläuft.

Light pool button

2612Light pool buttonSchaltflächenEin beleuchteter Röhrenzeichenknopf, der einen verschwommenen Pool seiner eigenen Farbe auf die Oberfläche darunter ergießt und beim Schweben oder Fokussieren die Figur gegen den Boden tauscht.

Sealing frame button

2615Sealing frame buttonSchaltflächenEin Aufruf zum Handeln mit quadratischem Umriss, dessen Rand durch drei ruhende Lücken unterbrochen ist; Durch das Schweben wird der Rahmen verschlossen, während sich die Füllung umdreht.

Skewed blade invert

2618Skewed blade invertSchaltflächenEine dunkle, abgerundete Taste, die sich in eine schräge Akzentklinge umdreht, die sich bei Hover oder Tastaturfokus von ihrer Mitte nach außen öffnet.

Diagonal wedge button

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

Interlocking comb button

2678Interlocking comb buttonSchaltflächenZwei Kämme aus vertikalen Balken gleiten von oben und unten hinein und greifen ineinander, um den Knopf auszufüllen, wobei sie das Etikett beim Vorbeigehen umdrehen.

Arrow wipe button

2683Arrow wipe buttonSchaltflächenEin Pillenknopf, dessen Akzentplatte, die in eine Pfeilspitze geschnitten ist, beim Schweben von links nach innen streicht und die Beschriftung Buchstabe für Buchstabe umdreht, wenn sich die Spitze kreuzt.

Converging chevron button

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.

Hatch sweep button

2685Hatch sweep buttonSchaltflächenEine feine diagonale Schraffur wird beim Hovern über der Schaltfläche eingeblendet und scrollt für immer, wobei die Beschriftung überall dort invertiert wird, wo eine Linie sie kreuzt.

Slanted shutter button

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.

Word tumble button

2694Word tumble buttonSchaltflächenWenn Sie den Mauszeiger darüber bewegen, wird die Großbuchstabenbeschriftung in einem abgeschnittenen Schlitz über sich selbst gerollt, während eine diagonale Akzentfüllung das Feld dahinter überstreicht und eine Differenzmischung die Wortfarbe umdreht.

Invert and lift button

2700Invert and lift buttonSchaltflächenEine große, umrandete Schaltfläche, die sich in eine durchgehende Füllung umwandelt, beim Schweben ein paar Pixel anhebt und beim Drücken wieder flach wird.

Invert and grow button

2770Invert and grow buttonSchaltflächenEin umrandeter Block, der seine Tinten- und Papierfarben austauscht und beim Schweben aus seiner Mitte heraus wächst und dann flach unter der Presse einrastet.

Gesamtes Verzeichnis öffnen

Schlagwörter

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)alert (8)align (3)ambient (39)analytics (13)anchored (3)animated (82)animation (4)annotation (3)app shell (3)arc (4)arcs (3)area (12)area chart (4)arrow (32)audio (3)aurora (4)auth (11)authentication (12)auto height (4)autocomplete (4)avatar (10)avatars (3)axis (5)backdrop (18)backer (3)background (54)badge (21)band (6)banner (9)bar (16)bar chart (3)bars (6)beam (6)beams (5)bevel (12)bezel (3)bin (3)blend (4)blob (4)blobs (3)bloom (10)blur (15)booking (9)bookmark (3)border (16)bounce (6)brackets (3)breadcrumb (4)breathing (3)broadcast (3)burst (7)busy (5)button (397)button group (5)buttons (4)calendar (32)call to action (11)callout (3)canvas (89)capsule (12)caption (8)card (35)cards (7)caret (5)carousel (11)cascade (3)category (3)cells (4)chain (3)characters (4)chart (59)chat (4)check (3)checkbox (13)checklist (6)checkmark (5)chevron (10)chip (22)chips (4)circle (9)circular (5)click (7)clip (9)clipboard (3)close (4)cloud (3)cluster (3)code (6)collapse (11)collapsible (6)collision (3)column (3)columns (3)combobox (4)command palette (3)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)copy (4)corner (6)corners (7)count (7)count-up (3)counter (18)crossfade (5)crosshair (6)cta (28)cue (4)cursor (26)curtain (7)curve (4)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)date picker (16)date range (13)deck (3)delay (5)delete (8)depth (32)destructive (9)destructive-action (4)device mockup (3)diagonal (13)diagram (3)dial (5)dialog (17)digits (5)direction (5)disc (5)disclosure (8)dismiss (6)displacement (3)distortion (5)divider (4)dock (4)donut (7)dots (15)download (10)drag (21)draw (3)drawer (10)drift (17)dropdown (18)dropdown menu (3)duration (3)easing (4)echo (3)edge (7)edge light (3)editor (3)elastic (8)elevation (6)ellipsis (3)email (3)emboss (4)emphasis (3)empty state (3)entrance (14)error state (3)events (3)exit (3)expand (23)explorer (3)fade (9)falling (3)falloff (4)fan (6)faq (4)feed (3)feedback (12)field (6)fill (46)film (3)filter (12)flat (6)flat shadow (3)flight (3)flip (10)floating panel (4)flood (14)flow (5)fluid (3)flyout (3)focus (19)focus ring (5)focus trap (6)folder (5)follow (11)form (47)form-control (12)formatting (3)frame (19)gallery (15)game (3)gap (4)gauge (5)gesture (6)ghost (7)glare (3)glitch (9)glow (39)glyph (7)gradient (38)grain (10)gravity (3)grid (35)group (8)guide (3)hairline (8)halftone (4)halo (15)hamburger (4)hard shadow (6)heading (8)headline (19)hero (11)hexagon (3)highlight (22)hinge (4)hint (12)hold (6)horizon (3)horizontal (4)hover (251)hover card (10)hover reveal (3)icon (121)icon-button (23)icons (4)identity (3)indeterminate (4)indicator (9)inertia (4)initials (3)ink (4)inline (5)input (20)input group (3)inset (11)interactive (8)invert (26)italic (3)key (11)keyboard (20)keyboard navigation (6)keycap (10)knob (4)kpi (5)label (14)label reveal (3)label swap (9)labels (7)lag (4)lattice (4)launch (3)layered (9)layers (3)layout (18)ledge (6)legend (9)lens (4)letters (10)lift (19)light (22)lightbox (4)like (4)line (11)line chart (4)lines (8)link (11)link preview (7)liquid (7)list (13)live (3)loader (9)loading (27)login (10)loop (42)magnet (5)magnetic (3)magnify (3)map (4)marker (3)markers (6)marquee (8)mask (9)matrix (4)media (4)menu (23)merge (3)mesh (5)message (4)metal (10)meter (5)metric (10)metrics (5)minimal (10)modal (19)monospace (12)monthly (12)morph (14)motion (3)motion tuning (3)moulded (6)multi-select (4)nav (3)navbar (3)navigation (21)nested (7)neutral (4)night (4)noise (16)notification (3)notifications (4)nudge (4)number (11)odometer (5)offset (7)on-off (4)onboarding (3)one time code (5)options (5)orb (4)orbit (13)otp (3)outline (63)outlined (4)overflow (7)overlay (24)overshoot (3)page (18)palette (3)panel (31)panels (6)paper plane (4)paragraph (3)parallax (15)particles (18)paste (3)path (4)pattern (9)percentage (4)perimeter (3)perspective (20)photo (5)physics (5)picker (3)pie (7)pill (83)pill switch (4)pin (3)pinned (3)pixel (3)placeholder (4)plane (5)plate (9)play (4)playful (7)pointer (65)polar (8)pop (4)popover (17)post card (3)power (3)press (77)pressed (6)pricing (3)primitive (4)print (4)profile (8)progress (27)proportion (4)providers (4)pulse (17)queue (3)quiet (5)radar (9)radial (8)radio (4)radio group (8)raised (3)ramp (5)ranking (3)rays (4)readout (4)record (3)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)reveal (80)ribbon (6)rim (8)ring (25)rings (10)ripple (18)rise (3)roll (6)rotate (21)rotating text (4)rotation (6)round (5)rounded (3)row (11)rows (4)save (5)scale (20)scan (5)scatter (4)scheduler (3)scramble (5)screen (3)screenshot frame (3)scroll (38)scrub (5)search (8)section (4)sections (4)segmented (7)segmented control (12)select (5)selection (5)send (23)sequence (8)series (7)settings (11)shadow (28)shape (3)share (25)shared element (4)sheen (14)sheet (4)shell (3)shimmer (8)shine (5)shortcut (4)shuffle (3)shutter (5)sidebar (7)sign in (11)signal (8)signup (9)silhouette (3)sizes (4)skew (9)slab (6)slide (20)slider (10)sliding highlight (7)sliding indicator (3)snap (4)social (6)soft (6)space (5)spark (3)sparkline (3)spin (15)spinner (9)split (9)split-flap (3)split text (3)spotlight (7)spring (63)square (5)squash (4)stack (17)stacked (7)stagger (40)staircase (3)star (3)stars (6)stat (5)state (11)static (3)status (21)stepper (3)steps (3)sticker (4)sticky (4)streaks (3)strikethrough (3)stripes (5)stroke (6)submenu (9)submit (7)subtle (3)success (3)surface (5)svg (102)swap (12)sweep (40)swell (4)swipe (5)swirl (3)switch (16)tabs (22)tactile (26)tap (4)target (3)task (3)team (5)terminal (3)text (40)text button (3)text-effect (3)text field (4)text transition (3)textarea (4)texture (11)theme (3)theme toggle (4)thumbnail (4)ticker (5)tile (16)tiles (12)tilt (26)time (3)time range (3)time series (3)timeline (3)timer (3)timing (5)tint (5)toggle (65)toggle group (10)toolbar (25)tooltip (37)total (3)touch (3)trace (4)tracking (6)trail (20)transition (6)translucent (9)travel (6)tray (3)tree (3)trend (10)trigger (4)tunnel (4)twinkle (4)typewriter (9)typing (8)typography (18)underline (10)upload (5)uppercase (14)validation (5)value (3)values (4)variants (4)velocity (3)verification (8)video (4)viewport (6)voice (3)warp (6)wash (5)wave (13)waveform (3)waves (7)window (3)wipe (23)wireframe (3)wireless (3)wobble (6)word swap (3)words (3)wrapper (3)zoom (4)