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.

36 de 63

Cargando el índice completo de búsqueda.

Intent button set
1638Intent button setBotonesUna familia de botones completa en un solo archivo: sólido, suave, contorno, fantasma, enlace y pesos de peligro en cuatro tamaños, con ranuras para íconos, un estado de ocupado y un anillo de enfoque real.
Drifting border sheen
1685Drifting border sheenFondosUn panel cuyo contorno está iluminado por un suave resplandor bicolor, varias veces el tamaño del panel, que se desplaza lentamente alrededor del marco.
Focus halo button
1696Focus halo buttonBotonesUn botón sólido que se invierte en un contorno al pasar el puntero y crece en dos anillos translúcidos apilados en el momento en que se enfoca el teclado.
Lift and fill pill
1713Lift and fill pillBotonesUna pastilla delineada que salta una distancia fija hacia arriba y se llena con su acento mientras se la apunta, luego vuelve a caer en la misma curva.
Center out fill button
1848Center out fill buttonBotonesUn botón en mayúscula delineado cuyo relleno de acento se abre desde una línea fina en el centro hacia ambos bordes al pasar el cursor o enfocar.
Diagonal swipe button
1850Diagonal swipe buttonBotonesUn botón delineado que sostiene una delgada hoja inclinada que se endereza y se ensancha hasta que inunda el marco al pasar el mouse.
Edge tracking glow card
1854Edge tracking glow cardTarjetasUna tarjeta cuyo contorno solo se ilumina cuando el puntero se acerca a él, se ilumina a medida que te acercas al borde y se oscurece cerca del centro.
Hard Shadow Button
1864Hard Shadow ButtonBotonesUn botón de contorno grueso que levanta su sólida sombra desplazada al pasar el mouse y vuelve a presionarla al hacer clic.
Corner ticks frame button
1944Corner ticks frame buttonBotonesUn rectángulo oscuro marcado solo por cuatro marcas en las esquinas que se extienden para dibujar un fotograma completo, después del cual se abre un panel iluminado desde el centro y la etiqueta se invierte.
Hairline Tone Badge
1977Hairline Tone BadgeMensajes de estadoUna etiqueta de pastilla sin llenar cuyo borde y texto comparten un color, por lo que una fila de ellos se lee como una leyenda impresa.
Invert Fill Button
1984Invert Fill ButtonBotonesUn pequeño botón delineado que se llena de manera continua al pasar el mouse mientras su etiqueta cruza al valor opuesto, intercambiando el primer plano y el fondo de manera limpia.
Crackling border frame
2135Crackling border frameAnimaciónUn marco redondeado cuyo contorno se vuelve a dibujar en cada fotograma como un arco de luz tembloroso, con un brillo constante debajo y un contenido perfectamente quieto en la parte superior.
Diagonal shutter fill button
2141Diagonal shutter fill buttonBotonesUn botón delineado que se llena cuando dos hojas inclinadas se balancean desde lados opuestos, se enderezan en mitad del vuelo y se encuentran en el medio.
Focus Lens
2155Focus LensAnimaciónUna forma delineada que permanece suave y desenfocada en todas partes excepto en un pequeño círculo que sigue al puntero, donde se recorta.
Italic outline fill button
2174Italic outline fill buttonBotonesUn botón silencioso y delineado en cursiva que se invierte en un acento sólido en el momento en que un puntero o teclado lo alcanza.
Inset Edge Pill
2371Inset Edge PillBotonesUna pastilla pálida con un anillo delgado alrededor y un labio más grueso solo en la parte inferior, por lo que se lee como una clave física que se inunda de color al pasar el mouse.
Arcade plate button
2501Arcade plate buttonBotonesUn botón de menú de juego ancho con una placa con contorno gris, un bisel oscuro insertado y letras estampadas que se iluminan al pasar el mouse y se oscurecen cuando se mantiene presionado.
Dashed outline tooltip button
2536Dashed outline tooltip buttonBotonesUn botón fantasma discontinuo que se inunda con su acento al pasar el cursor o al enfocar mientras una información sobre herramientas puntiaguda se despliega desde el borde más cercano al botón.
Diagonal blob flood button
2538Diagonal blob flood buttonBotonesUn botón delineado inundado por una gran mancha redondeada que se desliza diagonalmente desde su esquina superior y se oscurece mientras se mantiene presionado.
Jello squash button
2556Jello squash buttonBotonesUn botón delineado que se inunda de color al pasar el mouse y se tambalea a través de una secuencia de aplastamiento y estiramiento antes de asentarse.
Draining fill button
2588Draining fill buttonBotonesUna pastilla delineada que comienza completamente inundada de color y drena hasta una banda delgada en el pie al pasar el mouse, luego se vuelve a llenar desde abajo al salir.
Detached Ring Pill
2595Detached Ring PillBotonesUna pastilla oscura orbitada por un anillo de contorno flotante que empuja más hacia afuera e inunda la pastilla con color al flotar.
Corner bracket frame button
2596Corner bracket frame buttonBotonesUna etiqueta en mayúsculas desnuda que queda encerrada por dos soportes en forma de L que se deslizan desde lados opuestos y luego crecen para cerrar el marco.
Edge wipe invert
2597Edge wipe invertBotonesUn botón delineado cuyo relleno sólido se desplaza desde un borde e invierte la etiqueta a medida que pasa por debajo.
Clamp jaws glow button
2598Clamp jaws glow buttonBotonesUn botón de contorno hueco cuyas marcas laterales se deslizan hacia adentro, se fusionan en mandíbulas y se cierran sobre la etiqueta con un brillo acentuado al pasar el mouse o enfocar.
Diagonal orb fill button
2626Diagonal orb fill buttonBotonesUn círculo de gran tamaño se desliza de esquina a esquina a través de un botón delineado, llenándolo en diagonal y se oscurece en el instante en que lo presionas.
Corner bracket seal button
2644Corner bracket seal buttonBotonesDos soportes de esquina cortos crecen a lo largo de los bordes hasta que se sellan formando un marco completo alrededor de la etiqueta al pasar el mouse.
Frame draw button
2646Frame draw buttonBotonesUn botón lleno que drena su relleno al pasar el mouse mientras cuatro barras delgadas salen corriendo desde esquinas opuestas para dibujar un cuadro completo, luego todo regresa al salir.
Hairline trace submit
2647Hairline trace submitBotonesUn botón de envío oscuro cuya línea de un píxel se ilumina, recorre el perímetro desde el borde en el que ingresó el puntero y luego retrocede de la misma manera.
Ink bloom button
2662Ink bloom buttonBotonesUn botón de contorno pesado cuyo tinte translúcido es superado por un disco sólido de acento que florece desde el centro al pasar el mouse o al enfocar el teclado.
Lifting hard shadow pill
2663Lifting hard shadow pillBotonesUna pastilla de contorno grueso que se desplaza hacia arriba y hacia la izquierda al pasar el mouse mientras su sombra plana y sólida se extiende debajo de ella y presiona al ras de la página mientras la sostiene.
Bevel frame button
2674Bevel frame buttonBotonesUn botón con marco cuadrado cuyos dos extremos se biselan en puntos al pasar el mouse, convirtiendo el rectángulo en una insignia de seis lados.
Halo ring button
2677Halo ring buttonBotonesUn botón delineado que lanza un único anillo hacia afuera cuando lo pasas por encima, la banda se expande más allá del borde y se adelgaza hasta quedar en nada a medida que avanza.
Invert and lift button
2700Invert and lift buttonBotonesUn botón alto y delineado que se invierte en un relleno sólido y levanta un par de píxeles al pasar el mouse, luego vuelve a quedar plano cuando se presiona.
Border trace button
2709Border trace buttonBotonesUn botón silencioso y translúcido cuyos cuatro bordes se dibujan en secuencia al pasar el mouse mientras una suave banda de luz cruza la cara.
Draining fill button
2763Draining fill buttonBotonesUn botón inundado que sale de un borde al pasar el cursor, dejando un contorno hueco con la etiqueta volteada para resaltar.
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)