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.

23 de 23

Copy confirm button

1630Copy confirm buttonBotonesUn botón de icono cuadrado que copia una cadena e intercambia su glifo por una marca dibujada, encogiéndose y difuminando una a medida que la otra llega a su lugar.

Day night sweep toggle

1631Day night sweep toggleBotonesUn botón de ícono que alterna un panel de configuración entre claro, oscuro y automático, repintándolo con un borde recortado que se desplaza en lugar de desvanecerse.

Format toggle button

1634Format toggle buttonBotonesUn botón de icono que mantiene un estado de encendido o apagado y que, al presionarlo, difumina una placa redondeada detrás de su glifo.

Pressed highlight toggle

1647Pressed highlight toggleBotonesUn botón de icono de dos estados que mantiene visible su estado presionado con un bloque resaltado redondeado que crece detrás del glifo desde el centro hacia afuera.

Button set

1673Button setBotonesUna familia de botones completa que cubre seis intenciones, seis tamaños, formas de solo íconos y un estado de carga que se intercambia en una rueda giratoria sin que el botón cambie de ancho.

1710Icon label toolbarBotonesUna barra de herramientas compacta de botones de íconos silenciosos, cada uno dibujado con su propio tono, con un botón de retroceso cuya etiqueta se despliega fuera del ícono al pasar el mouse.

1827Expanding icon pillBotonesUn botón de icono redondo que crece hasta convertirse en una pastilla etiquetada al pasar el cursor o al enfocar, girando su glifo una revolución completa a medida que la etiqueta se desliza hacia adentro.

Chevron flip tile

1936Chevron flip tileBotonesUn ícono cuadrado cuyo galón se articula plano y se vuelve a abrir apuntando hacia el otro lado, cada mitad girando sobre la junta donde se encuentran.

Two bar close tile

2071Two bar close tileBotonesUn mosaico de menú de dos líneas que se cierra en dos tiempos: las barras se deslizan juntas en una línea y luego se separan formando una cruz.

2149Expanding icon toolbarNavegaciónUna fila de botones de íconos circulares donde la herramienta seleccionada se expande en una píldora llena con su etiqueta, además de una campana que abre una lista de notificaciones y una píldora de bloqueo de dos estados.

2208Pressable icon toggleBotonesUn botón con un ícono y una etiqueta que permanece presionado visualmente una vez que se hace clic, para una acción independiente de encendido o apagado, como silenciar o poner en negrita.

2257Toolbar icon tooltipCapas superpuestasUna fila de botones de la barra de herramientas que solo contienen íconos y que muestran una pequeña etiqueta con punta de flecha cerca del que esté sobre el cursor o enfocado.

Answer call circle

2467Answer call circleBotonesUn botón de aceptación redondo con solo un ícono y un glifo de teléfono, un timbre lento mientras espera una llamada y una pulsación suave.

Cross morph menu button

2502Cross morph menu buttonBotonesUn ícono de menú delgado de tres barras que se pliega en una cruz cerrada, las barras exteriores viajan hacia la línea central antes de cortarse y volver a colorear.

Pivot bars menu button

2503Pivot bars menu buttonBotonesUn botón de menú cuyas tres barras irregulares giran un cuarto de vuelta y se reducen hasta convertirse en una corta columna de puntos, cambiando de color a medida que avanzan.

Plus to cross tile

2512Plus to cross tileBotonesUna pequeña losa cuadrada con un signo más que gira cuarenta y cinco grados formando una cruz cerrada y se hincha una fracción a medida que gira.

Sun moon morph toggle

2516Sun moon morph toggleBotonesUn tema alterna donde un sol anillado aleja sus rayos y crece mientras un segundo disco se desliza para arrancarle una media luna.

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.

2636Slab Lift Icon ButtonBotonesUn icono translúcido que se eleva desde una sólida losa de luz al flotar, luego vuelve a caer y se traga la losa cuando se presiona.

Download tooltip button

2697Download tooltip buttonBotonesUn botón de icono cuadrado cuya flecha de descarga se mueve hacia abajo y toma el color de acento mientras se despliega un título del tamaño de un archivo debajo.

2698Icon swell tooltipBotonesUn botón de ícono sin cromo cuyo glifo se hincha y cambia de color al pasar el mouse mientras un chip de etiqueta se despliega sobre él desde su borde izquierdo.

Shape wipe theme toggle

2780Shape wipe theme toggleCampos de entradaUn botón con el ícono del sol y la luna que cambia el tema del panel con una forma que crece desde el botón, intercambia los colores cuando está completamente cubierto y luego se encoge.

Latching square toggle

2808Latching square toggleCampos de entradaUn botón de icono cuadrado compacto que se engancha entre un estado apagado con un contorno tenue y un estado presionado lleno de acento sólido.

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)