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.

25 de 25

Dock menu

1528Dock menuNavegaciónUn muelle inferior cuyos íconos toman su tamaño de la distancia del puntero, con una etiqueta encima del ícono debajo del cursor y un punto debajo del activo.

Joined action bar

1639Joined action barBotonesUna fila de botones soldados en una barra con costuras finas colapsadas, redondeadas solo en los extremos exteriores y un segmento cuadrado final que abre un menú adicional.

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.

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.

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.

Bulk action toolbar

1927Bulk action toolbarCapas superpuestasUna barra de herramientas flotante para recorrer una cola de registros uno a la vez, con acciones de íconos que revelan su etiqueta al pasar el mouse y un botón principal que confirma el destino.

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.

Traveling Toolbar Tooltip

2096Traveling Toolbar TooltipCapas superpuestasUna única información sobre herramientas flotante que se desliza suavemente de un ícono de la barra de herramientas al siguiente cuando el cursor o el foco se mueven entre ellos, en lugar de desaparecer y reaparecer cada vez.

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.

Expanding label toolbar

2150Expanding label toolbarNavegaciónUna fila de botones de herramientas de íconos donde el seleccionado se expande para mostrar su etiqueta, con una burbuja de confirmación flotante y un interruptor de bloqueo separado.

Grouped magnify dock

2162Grouped magnify dockNavegaciónUna base inferior de botones de iconos redondos se divide en dos grupos que crecen cuanto más se acerca el puntero a cada uno.

Joined Button Group

2175Joined Button GroupBotonesUna fila de botones fusionados borde con borde en un control segmentado, con costuras compartidas que se iluminan entre los dos botones que se desplazan o presionan.

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.

2361Grouped icon toolbarNavegaciónUna barra de herramientas horizontal compacta que agrupa los botones de íconos en grupos divididos por separadores delgados, para acciones rápidas de estilo de formato.

Lifting share chip

2480Lifting share chipBotonesUn pequeño chip sólido con un glifo y una etiqueta de mayúsculas cortas que levanta unos cuantos píxeles y se suaviza al pasar el cursor, se asienta cuando se presiona y puede alternar entre un glifo relleno.

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.

2554Rising tooltip icon buttonBotonesUn botón de icono sin cromo cuyo glifo se hincha y adquiere un color de advertencia al pasar el cursor, mientras que un pequeño chip de etiqueta se eleva sobre él después de un breve retraso.

2572Snap back icon buttonBotonesUn botón de glifo simple que crece suavemente debajo del puntero y vuelve a su tamaño de reposo en el instante en que se presiona.

Perspective sheen button

2582Perspective sheen buttonBotonesUn botón rectangular sólido que lleva un panel brillante translúcido sesgado en perspectiva que se aplana al flotar.

2611Lifting glyph rowBotonesUna fila corta de botones de solo íconos donde el glifo suspendido se eleva de la línea de base mientras un suave tinte circular se desvanece detrás de él, cada elemento teñido en su propio tono.

Border brighten button

2641Border brighten buttonBotonesUn botón oscuro cuyo marco de dos píxeles es la única parte móvil: sube a blanco al pasar el mouse y colapsa en un anillo interior apretado mientras se mantiene presionado el botón.

Double bevel button

2645Double bevel buttonBotonesUn botón pálido que se lee como una tecla moldeada gracias a dos sombras interiores opuestas, una oscura desde arriba y otra brillante desde abajo, que se encuentran detrás de una fría rampa gris.

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.

Inset sheen button

2699Inset sheen buttonBotonesUn botón de utilidad pálido con un borde fino, un resaltado de un píxel a lo largo de su borde superior y un estado presionado que invierte el brillo hacia adentro.

Uppercase action button

2706Uppercase action buttonBotonesUn botón de acción compacto y relleno con una etiqueta con seguimiento en mayúsculas, esquinas cuadradas y estados silenciosos de solo relleno y de desplazamiento para barras de herramientas y encabezados de paneles.

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)