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.

26 de 26

Press response tile
1798Press response tileAnimaciónUna loseta táctil que se comprime bajo el punto de presión y regresa al soltarse, inclinándose hacia cualquier parte de su cara que hayas empujado.
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.
Key travel button
1835Key travel buttonBotonesUna tecla redondeada que se apoya sobre una base alta que se acorta al pasar el mouse y desaparece bajo la presión, dejando la llave plana.
Carved Pill Button
1847Carved Pill ButtonBotonesUna pastilla tallada en una suave superficie mate mediante sombras internas opuestas, que se eleva hasta convertirse en una plataforma elevada en el momento en que se suspende o se enfoca.
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.
Molded key send button
2191Molded key send buttonBotonesUn botón de envío moldeado a partir de la propia página: una carcasa exterior elevada que contiene una pastilla interior empotrada con un avión de papel y una etiqueta.
Offset shadow press button
2482Offset shadow press buttonBotonesUn botón de contorno plano que se asienta sobre una sombra desplazada y se desliza hacia abajo cuando se presiona, como una tecla real que toca fondo.
Spacebar Keycap
2507Spacebar KeycapBotonesUna amplia tecla mecánica que puedes presionar con el puntero o con la tecla de espacio real, completa con un tope de referencia y un recorrido esculpido.
Soft relief send button
2519Soft relief send buttonBotonesUn botón de envío moldeado a partir de una superficie clara: un borde de dos tonos alrededor de una almohadilla interior suave con un glifo de envío relleno que se hunde mientras se mantiene presionado.
Nested bezel send button
2529Nested bezel send buttonBotonesTres marcos anidados forman un botón físico grueso: un bisel exterior, un pozo sombreado y una cápsula interior cuyo glifo gira una vuelta completa más una cuarta parte al pasar el mouse.
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.
Live keycap
2541Live keycapBotonesUna tecla de aspecto físico que se presiona hacia abajo cuando se hace clic y refleja la tecla correspondiente en el teclado real del lector.
Ivory keycap button
2561Ivory keycap buttonBotonesUna tecla pálida levantada sobre una repisa a juego; Al flotar se espesa su borde insertado y al presionarlo se asienta al ras de la superficie.
Skewed slab press
2562Skewed slab pressBotonesUn botón de losa inclinado que se encuentra sobre una repisa dura que cae plano y aprieta sus letras mientras se sostiene, luego vuelve a saltar al soltarlo.
Growing ledge button
2566Growing ledge buttonBotonesUn botón de acento sólido que descansa sobre un borde inferior más oscuro que se espesa y se levanta al flotar, luego se adelgaza y se hunde al presionarlo.
Arcade dome button
2574Arcade dome buttonBotonesUn botón redondo cuya tapa abovedada flota sobre una base más oscura y se asienta al ras con una caída visible cuando se presiona.
Raised bezel button
2614Raised bezel buttonBotonesUna tecla de acción táctil construida a partir de tres placas apiladas, un borde mecanizado, un cuerpo redondeado y una cara de cápsula insertada, que se hunde en su sombra cuando se presiona.
Sinking lip button
2617Sinking lip buttonBotonesUna tapa redondeada y gruesa con una banda labial más oscura que se colapsa al presionarla para que la tapa se hunda al ras de su base y luego vuelve a aparecer al soltarla.
Three layer push button
2620Three layer push buttonBotonesUna tecla táctil construida a partir de tres placas apiladas, una sombra proyectada, una pared lateral oscura y una cara flotante, que surge al flotar y toca fondo instantáneamente al presionarla.
Keycap lift button
2630Keycap lift buttonBotonesUn botón de llave mecánica que se levanta al pasar el mouse, mantiene un borde inferior sólido e intercambia toda su pila de sombras hacia adentro cuando se presiona.
Pressed tile icon button
2634Pressed tile icon buttonBotonesUn ícono de mosaico suave y moldeado que se alza orgulloso de una superficie pálida y, al flotar, se hunde en ella al girar su par de sombras del revés.
Stacked plate press button
2655Stacked plate press buttonBotonesUn botón redondeado y grueso construido a partir de tres placas anidadas que se separan telescópicamente al presionarlo y se cierran al soltarlo.
Physical keycap button
2689Physical keycap buttonBotonesUna tecla moldeada con una parte superior sombreada y un recorrido real: se presiona, aplasta y parpadea cuando se hace clic o cuando se presiona la tecla enlazada.
Pressed ledge button
2690Pressed ledge buttonBotonesUn botón sólido que descansa sobre un borde inferior grueso y oscuro que se colapsa cuando se presiona, por lo que la tapa cae al ras como una llave real.
Keycap press button
2717Keycap press buttonBotonesUna tecla pálida con un grosor real construida a partir de sombras duras apiladas, que viaja hacia abajo y pierde altura cuando se presiona.
Embossed press button
2765Embossed press buttonBotonesUn botón sólido y redondeado que se lee como una tecla física elevada en reposo y que se voltea hasta quedar empotrado y presionado en la superficie al pasar el mouse, enfocar y presionar.
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)