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

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.
Rotating face plate
1742Rotating face plateBotonesUn botón cuya placa oscura etiquetada gira en una esquina y crece cuando se activa, exponiendo la losa decorativa debajo como cuatro triángulos, luego se encoge e intercambia colores mientras se presiona.
Sweep invert button
1837Sweep invert buttonBotonesUn botón azul marino intenso cuyo relleno brillante se extiende desde el borde derecho y cambia la etiqueta al tono oscuro con solo apretarlo rápidamente.
Color swap play button
1849Color swap play buttonBotonesUna píldora de juego en mayúsculas que intercambia sus colores de fondo y de texto al pasar el mouse, elevándose a medida que su brillo de color se vuelve oscuro.
Outline invert button
1872Outline invert buttonBotonesUn botón de pizarra oscura rodeado por un contorno cálido que intercambia todos los colores con su borde al pasar el cursor y se eleva con un brillo cambiante.
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.
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.
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.
Offset outline stack
2392Offset outline stackBotonesUna cara de botón con bordes que descansa sobre capas de contorno escalonadas como una pequeña libreta de papel; hover desliza la hoja superior sobre la pila e invierte su relleno.
Expanding disc mute toggle
2520Expanding disc mute toggleBotonesUn ícono redondo alterna donde un disco oscuro crece desde el centro para tragarse la cara pastel, volteando el glifo a claro a medida que pasa por debajo.
Invert on hover pill
2528Invert on hover pillBotonesUna pastilla llena que cambia los colores de relleno y etiqueta y se hincha ligeramente al pasar el mouse o al enfocar con el teclado, apretándose por debajo de su tamaño en reposo mientras se presiona.
Nudge arrow invert button
2530Nudge arrow invert buttonBotonesUna pastilla oscura en mayúsculas con una flecha clavada en el borde derecho; Al pasar el cursor, se invierte a una superficie pálida y empuja la flecha hacia adelante, y al presionar se muestra un relleno cálido.
Comb wipe invert button
2542Comb wipe invert buttonBotonesDos peines a rayas entrelazadas se deslizan desde arriba y desde abajo para cubrir una pastilla negra, invirtiendo la etiqueta a medida que pasan.
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.
Light pool button
2612Light pool buttonBotonesUn botón de señal de tubo iluminado que derrama un charco borroso de su propio color sobre la superficie debajo de él y cambia la figura por el suelo cuando se suspende o se enfoca.
Sealing frame button
2615Sealing frame buttonBotonesUn cuadrado delinea un llamado a la acción cuya frontera se encuentra interrumpida por tres espacios en reposo; flotar sella el marco y se invierte el relleno.
Skewed blade invert
2618Skewed blade invertBotonesUn botón oscuro y redondeado que se invierte como una hoja decorativa inclinada se abre hacia afuera desde su centro al pasar el mouse o al enfocar con el teclado.
Diagonal wedge button
2676Diagonal wedge buttonBotonesUn botón cuadrado relleno por una cuña triangular que crece en diagonal hasta cubrir todo el rostro.
Interlocking comb button
2678Interlocking comb buttonBotonesDos peines de barras verticales se deslizan desde arriba y desde abajo y se entrelazan para llenar el botón, invirtiendo la etiqueta a medida que pasan.
Arrow wipe button
2683Arrow wipe buttonBotonesUn botón de pastilla cuya placa decorativa, cortada en forma de punta de flecha, se desplaza desde la izquierda al pasar el mouse e invierte la etiqueta letra por letra a medida que su punta se cruza.
Converging chevron button
2684Converging chevron buttonBotonesDos placas en forma de flecha vuelan desde lados opuestos y se encuentran en el centro del botón, sellándolo detrás de la etiqueta.
Hatch sweep button
2685Hatch sweep buttonBotonesUn fino sombreado diagonal se desvanece sobre el botón al pasar el mouse y se desplaza para siempre, invirtiendo la etiqueta dondequiera que una línea la cruce.
Slanted shutter button
2692Slanted shutter buttonBotonesDos paneles decorativos inclinados caen desde arriba y desde abajo para cerrar sobre la pastilla en una costura diagonal mientras la etiqueta rueda una vez y se invierte a través del relleno.
Word tumble button
2694Word tumble buttonBotonesAl pasar el cursor, la etiqueta en mayúsculas se desplaza sobre sí misma dentro de una ranura recortada mientras un relleno de acento diagonal recorre el panel detrás de ella y una combinación de diferencias invierte el color de la palabra.
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.
Invert and grow button
2770Invert and grow buttonBotonesUn bloque con bordes que intercambia los colores de la tinta y el papel y crece desde su centro mientras está suspendido, luego se aplana bajo la prensa.
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)