Fieldbook
Iniciar sesión

Componentes

Cada componente, en vivo

Componentes originales de React para tus proyectos. Cada ficha muestra el componente real: mueve el cursor, haz clic y escribe. Inicia sesión para acceder al código, las propiedades, la instalación y las versiones Vue, Svelte, Astro y HTML.

28 de 28

Deep Slab Button
1825Deep Slab ButtonBotonesUna losa alta que flota sobre la página en una larga sombra diagonal y se hunde sobre ella cuando se suspende, luego se aplasta al hacer clic.
Press block button
1831Press block buttonBotonesUn botón de bloque redondeado que descansa sobre una sólida repisa de sombra que se acorta a medida que el botón desciende al presionarlo.
Floating download pill
1857Floating download pillBotonesUna pastilla completamente redondeada que parece flotar sobre la página y se acerca a ella cuando pasas el cursor y presionas.
Lift and Sink Button
1868Lift and Sink ButtonBotonesUn botón monoespacial tintado que flota al pasar el mouse y se hunde en su propia sombra cuando se presiona.
Settling Add Pill
1885Settling Add PillBotonesUna cápsula compacta con una marca más que se asienta en tres profundidades de sombra cuando la mueves y luego la presionas.
Soft Pad Button
1889Soft Pad ButtonBotonesUn bloc redondeado sobre una superficie mate con sombras claras y oscuras emparejadas, que se ubica más cerca de la página debajo de la imprenta.
Emboss swap button
1955Emboss swap buttonBotonesUn pequeño chip saturado que cambia su sombra plana por un relieve moldeado en cuatro direcciones al pasar el mouse, por lo que la superficie parece extraída de la página.
Nested plate send button
2005Nested plate send buttonBotonesUna pastilla moldeada asentada dentro de una placa de respaldo cuya sombra proyectada se tensa al flotar y se aplana al presionar.
Layered shadow headline
2179Layered shadow headlineEfectos de textoUn título breve y en negrita con una copia duplicada detrás, sombreado en diagonal con un color de acento, que se desplaza lentamente para darle a las letras una losa de sombra en movimiento.
Striped shadow heading
2248Striped shadow headingEfectos de textoUn título en negrita con una copia duplicada detrás, lleno de franjas diagonales que siguen flotando como una larga sombra proyectada.
Tilted plinth call to action
2254Tilted plinth call to actionBotonesUn llamado a la acción grueso que descansa sobre un pedestal de color sólido, ligeramente inclinado en el espacio, que se levanta de su base al flotar y se hunde bajo una prensa.
Left Edge Fill Button
2378Left Edge Fill ButtonBotonesUna losa suave y redondeada donde un panel de color crece desde el borde izquierdo para llenar toda la forma al pasar el mouse, volteando la etiqueta a medida que pasa.
Center bloom button
2471Center bloom buttonBotonesUna pastilla sólida y redondeada que se ilumina desde el centro hacia afuera a medida que un lavado circular pálido crece más allá de sus propios bordes y luego se hunde cuando se presiona.
Lift and settle button
2479Lift and settle buttonBotonesUn botón sólido que flota hacia arriba y adquiere el color de acento al pasar el mouse, luego se hunde más allá de su línea de reposo en una sombra colapsada cuando se presiona.
Soft relief button
2514Soft relief buttonBotonesUna pastilla pálida levantada por una luz cálida en un lado y una sombra fría en el otro, ambas se tensan al flotar y desaparecen por completo cuando se mantiene al ras.
Looping flight send button
2525Looping flight send buttonBotonesUn botón de envío similar a una tarjeta que levanta su sombra al pasar el cursor mientras su avión de papel gira hacia arriba, se aleja y regresa, y se aplasta cuando se hace clic.
Soft inset press button
2533Soft inset press buttonBotonesUna losa casi negra que se asienta sobre un panel a juego sobre dos sombras suaves opuestas, se hunde en la superficie mientras se sostiene y se eleva nuevamente al soltarse.
Elevated chip button
2534Elevated chip buttonBotonesUn chip pálido y redondeado que descansa sobre sombras suaves apiladas que se tiñen hacia el acento al pasar el mouse y se hunden en una sombra más profunda con un contorno acentuado cuando se presiona.
Outset ring tilt button
2544Outset ring tilt buttonBotonesUn botón estilo insignia con un anillo grueso flotando fuera de su borde que crece, se inclina un par de grados y deja caer una sombra dura al pasar el mouse.
Swelling pill button
2578Swelling pill buttonBotonesUna pastilla de gradiente de un tono que se hincha al pasar el mouse mientras una sombra teñida se extiende debajo y se comprime brevemente cuando se presiona.
Tilted Stack CTA
2586Tilted Stack CTABotonesUna llamada a la acción gruesa que permanece girada sobre una pila de sombras desplazadas y luego se mantiene en posición vertical debajo del puntero.
Settling shadow button
2592Settling shadow buttonBotonesUna pastilla de gradiente cálido que flota sobre una gran sombra teñida y aterriza cuando la sombra desaparece.
Ghost echo lift button
2606Ghost echo lift buttonBotonesUna píldora que se eleva al flotar mientras una copia fantasma de sí misma se hincha detrás de ella y se disuelve.
Grounded download pill
2608Grounded download pillBotonesUn botón de descarga completamente redondeado con una sombra teñida que se aprieta al presionarlo mientras su flecha desciende y retrocede.
Offset bloom button
2633Offset bloom buttonBotonesUna losa plana y brillante sin borde que genera una amplia neblina descentrada de su propio color al flotar y la comprime cuando se presiona.
Elevation ladder fill button
2660Elevation ladder fill buttonBotonesUna cápsula que sube tres escalones de elevación entre descansar, flotar y presionar mientras un lavado de acento de bordes suaves cruza su cara.
Icon badge send
2716Icon badge sendBotonesUn botón de envío redondeado cuyo glifo se encuentra en una insignia circular translúcida que se ilumina y gira mientras todo el botón se levanta al pasar el cursor y se fija al presionarlo.
Press down sweep button
2776Press down sweep buttonBotonesUn botón sólido cuyo relleno se vuelve más brillante desde un lado al pasar el cursor y cae plano contra la página mientras se mantiene presionado.
Abrir el índice completo
Etiquetas
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)