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.

32 de 32

1548Arrow iconIconosUna flecha de longitud completa que se desplaza a lo largo de su propio eje, con flechas emparejadas para las direcciones bidireccionales.

1558Corner arrow iconIconosUna flecha que se desliza por la esquina abierta de un cuadrado redondeado, hacia la esquina que nombra.

1560Download iconIconosUna flecha que se desliza hacia abajo en una bandeja, o fuera de una nube, para guardar y exportar acciones.

1563External link iconIconosUna página enmarcada con una esquina abierta, donde la flecha se desliza más allá del marco hacia la parte superior derecha.

1583Upload iconIconosUna flecha que se levanta de una bandeja o sube a una nube para realizar acciones de envío y publicación.

Arrow wipe call to action

1629Arrow wipe call to actionBotonesUna llamada a la acción cuya placa más oscura aparece desde la izquierda al pasar el mouse mientras una flecha escondida se desliza hacia afuera para encontrarse con la etiqueta y empuja un píxel hacia abajo cuando se hace clic.

Anchored site preview

1762Anchored site previewTarjetasUna vista previa al pasar el mouse cuyo lado, alineación y desplazamiento se pueden marcar, con una flecha apuntando que sigue el ancla y gira con ella cuando no hay espacio.

Edge aware popover

2145Edge aware popoverCapas superpuestasUn popover que surge de su gatillo y se voltea o se desplaza hacia el lado opuesto cuando el lado que usted solicitó pasa por el borde del marco y permanece pegado mientras las cosas se desplazan.

Pop scale panel

2207Pop scale panelCapas superpuestasUn popover que se abre desde la mitad del tamaño, apunta una pequeña flecha hacia su gatillo, atenúa la página detrás de él y se cierra con Escape o un clic externo.

Resizing hint tooltip

2214Resizing hint tooltipCapas superpuestasUna etiqueta flotante cuya burbuja cambia suavemente de tamaño cuando el texto es más largo o más corto, en lugar de cambiar de tamaño.

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.

Circled Arrow Pill

2319Circled Arrow PillBotonesUna píldora sólida de alto croma con la etiqueta a la izquierda y una flecha anillada a la derecha que avanza al pasar el mouse.

Download tray pulse button

2339Download tray pulse buttonBotonesUna píldora de acción redondeada con una pequeña marca de bandeja en su borde anterior, donde una punta de flecha cae a través de la bandeja en un bucle mientras el puntero descansa sobre ella.

Expanding chip back button

2350Expanding chip back buttonBotonesUn botón de pastilla pálido cuyo chip decorativo se extiende a todo lo ancho al pasar el mouse, llevando su flecha hacia el otro lado mientras la etiqueta permanece en su lugar y se cubre.

Growing Pill Backdrop

2362Growing Pill BackdropBotonesUna etiqueta desnuda con un disco tintado escondido detrás de sus primeras letras que crece hasta convertirse en una pastilla completa al pasar el cursor mientras la flecha se desliza hacia su lugar.

Rising arrow link button

2416Rising arrow link buttonBotonesUn botón de leer más donde la etiqueta se desliza hacia los lados para abrir un espacio y una flecha sube desde debajo del borde inferior recortado.

Underline Wipe Link

2459Underline Wipe LinkBotonesUn enlace de texto en mayúsculas cuya regla se desplaza desde la izquierda al pasar el mouse y se retrae hacia la derecha al salir, con una flecha larga que se desliza hacia casa.

Dot matrix arrow button

2527Dot matrix arrow buttonBotonesUn botón dibujado como filas de puntos se convierte en una punta de flecha hacia la derecha que se desliza hacia los lados y hacia atrás en un bucle lento mientras está suspendido o enfocado y se comprime hacia su punta cuando 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.

Squaring backer button

2567Squaring backer buttonBotonesUna pastilla sólida con un gemelo inclinado detrás que se nivela y se enciende al flotar mientras una flecha se despliega desde la izquierda al lado de la etiqueta.

Growing back arrow

2576Growing back arrowBotonesUn control trasero de flecha izquierda desnudo que crece y estira su eje al flotar, luego se detiene cuando se presiona.

Scroll cue pill

2584Scroll cue pillBotonesUna cápsula alta que sostiene una flecha larga y delgada que flota en un bucle, crece debajo del puntero y colapsa una vez utilizada.

Gap stretch arrow button

2585Gap stretch arrow buttonBotonesUna pastilla de ancho fijo cuya flecha se desplaza hasta el borde más alejado al pasar el mouse, ampliando el espacio después de una etiqueta estacionaria, con una copia tenue del rastro siguiendo un ritmo detrás.

Arrow relay badge pill

2601Arrow relay badge pillBotonesUn botón de pastilla con una insignia redonda izquierda cuya flecha sale por la esquina superior al pasar el mouse, mientras que una nueva llega desde abajo y el cuerpo se vuelve casi negro.

Orbiting caption disc

2613Orbiting caption discBotonesUn botón circular cuya leyenda en mayúscula recorre el borde interior en una órbita lenta e interminable mientras una insignia central transmite su flecha al pasar el mouse.

Disc to Pill CTA

2622Disc to Pill CTABotonesUn pequeño disco lleno al lado de una etiqueta en mayúsculas desnuda se extiende hasta convertirse en una pastilla completa al pasar el cursor o enfocar, revelando el texto y arrastrando la flecha.

Arrow chip button

2640Arrow chip buttonBotonesUn botón de acción redondeado con un chip de flecha brillante acoplado en su extremo derecho que se levanta de la página al pasar el mouse con una sombra desplazada y se hunde al presionarlo.

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.

Sliding send button

2704Sliding send buttonBotonesUn botón de envío plano que se desliza hacia la derecha al pasar el mouse mientras se abre el espacio entre su etiqueta y la flecha, retrocede unos pocos píxeles al presionarlo y vuelve a colocarse al salir.

Underline sweep link

2729Underline sweep linkBotonesUn botón de texto simple cuya regla crece desde la izquierda al pasar el mouse y retrocede hacia la derecha al salir, con una flecha larga que se extiende hacia adelante.

Round lift action button

2777Round lift action buttonBotonesUn botón de acción circular con una flecha triangular sólida que se hincha y se eleva al pasar el mouse, se oscurece mientras se mantiene presionado y gira su flecha hacia cualquiera de las cuatro direcciones.

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)