Composants

arrow

Explorez les aperçus interactifs, trouvez les bons composants et intégrez les composants ouverts à votre projet avec leur code source.

Créer à partir d’un guide Connectez votre agent Explorer les modèles de pages

32 sur 32

1548Arrow iconIcônesUne flèche pleine longueur qui se déplace le long de son propre axe, avec des flèches appariées pour les directions bidirectionnelles.

1558Corner arrow iconIcônesUne flèche sortant du coin ouvert d’un carré arrondi, vers le coin qu’elle nomme.

1560Download iconIcônesUne flèche qui glisse vers le bas dans un bac ou hors d'un cloud pour les actions de sauvegarde et d'exportation.

1563External link iconIcônesUne page encadrée avec un coin ouvert, où la flèche glisse au-delà du cadre vers le coin supérieur droit.

1583Upload iconIcônesUne flèche qui sort d'un plateau ou monte dans un nuage pour les actions d'envoi et de publication.

Arrow wipe call to action

1629Arrow wipe call to actionBoutonsUn appel à l'action dont la plaque plus sombre s'efface depuis la gauche lors du survol tandis qu'une flèche repliée glisse vers l'extérieur pour rencontrer l'étiquette et abaisse un pixel lorsque vous cliquez dessus.

Anchored site preview

1762Anchored site previewCartesUn aperçu en survol dont le côté, l'alignement et le décalage peuvent être composés, avec une flèche pointante qui suit l'ancre et se retourne avec elle lorsqu'il n'y a pas de place.

Edge aware popover

2145Edge aware popoverSuperpositionsUn popover qui sort de sa gâchette et se retourne ou se déplace vers le côté opposé lorsque le côté que vous avez demandé dépasse le bord du cadre, restant collé pendant que les choses défilent.

Pop scale panel

2207Pop scale panelSuperpositionsUn popover qui s'ouvre de moitié, pointe une petite flèche vers son déclencheur, assombrit la page derrière lui et se ferme sur Échap ou sur un clic extérieur.

Resizing hint tooltip

2214Resizing hint tooltipSuperpositionsUne étiquette de survol dont la bulle se redimensionne automatiquement lorsque son texte est plus long ou plus court, au lieu de passer d'une taille à l'autre.

2257Toolbar icon tooltipSuperpositionsUne rangée de boutons de barre d'outils composés uniquement d'icônes qui font apparaître une petite étiquette en forme de flèche à proximité de celui survolé ou mis au point.

Circled Arrow Pill

2319Circled Arrow PillBoutonsUne pilule solide à haute saturation avec l'étiquette à gauche et une flèche annelée à droite qui avance en survol.

Download tray pulse button

2339Download tray pulse buttonBoutonsUne pilule à action arrondie avec une petite marque de plateau sur son bord d'attaque, où une pointe de flèche tombe à travers le plateau sur une boucle pendant que le pointeur repose dessus.

Expanding chip back button

2350Expanding chip back buttonBoutonsUn bouton de pilule pâle dont la puce d'accent s'étend sur toute la largeur en survol, portant sa flèche vers l'autre côté tandis que l'étiquette reste en place et est recouverte.

Growing Pill Backdrop

2362Growing Pill BackdropBoutonsUne étiquette nue avec un disque teinté caché derrière ses premières lettres qui se transforme en une pilule complète en survol tandis que la flèche glisse en place.

Rising arrow link button

2416Rising arrow link buttonBoutonsUn bouton Lire la suite où l'étiquette glisse latéralement pour ouvrir un espace et une flèche y grimpe depuis le dessous du bord inférieur coupé.

Underline Wipe Link

2459Underline Wipe LinkBoutonsUn lien texte en majuscule dont la règle s'efface depuis la gauche en survol et se rétracte vers la droite en congé, avec une longue flèche qui glisse vers la maison.

Dot matrix arrow button

2527Dot matrix arrow buttonBoutonsUn bouton dessiné sous forme de rangées de points s'insère dans une pointe de flèche vers la droite qui glisse latéralement et vers l'arrière dans une boucle lente lorsqu'il est survolé ou focalisé et se compresse vers sa pointe lorsqu'il est enfoncé.

Nudge arrow invert button

2530Nudge arrow invert buttonBoutonsUne pilule majuscule sombre avec une flèche épinglée sur son bord droit ; le survol l'inverse en une surface pâle et pousse la flèche vers l'avant, et appuyer sur fait clignoter un remplissage chaud.

Squaring backer button

2567Squaring backer buttonBoutonsUne pilule solide avec un jumeau incliné derrière elle qui se met à niveau et s'allume en survol tandis qu'une flèche se déplie depuis la gauche à côté de l'étiquette.

Growing back arrow

2576Growing back arrowBoutonsUne commande arrière nue avec une flèche gauche qui grandit et étire son arbre en vol stationnaire, puis s'enclenche pour se reposer lorsqu'on appuie dessus.

Scroll cue pill

2584Scroll cue pillBoutonsUne grande capsule contenant une longue et fine flèche qui dérive sur une boucle, grandit sous le pointeur et s'effondre une fois utilisée.

Gap stretch arrow button

2585Gap stretch arrow buttonBoutonsUne pilule de largeur fixe dont la flèche arrière se dirige vers le bord le plus éloigné en survol, étirant l'espace après une étiquette stationnaire, avec une légère copie de trace suivant un battement derrière.

Arrow relay badge pill

2601Arrow relay badge pillBoutonsUn bouton de pilule avec un badge rond à gauche dont la flèche sort par le coin supérieur en survol tandis qu'un nouveau arrive par le bas et le corps devient presque noir.

Orbiting caption disc

2613Orbiting caption discBoutonsUn bouton circulaire dont la légende en majuscule parcourt le bord intérieur dans une orbite lente et sans fin tandis qu'un badge central relaie sa flèche en survol.

Disc to Pill CTA

2622Disc to Pill CTABoutonsUn petit disque rempli à côté d'une étiquette majuscule nue s'étire en une pilule pleine en survol ou en mise au point, révélant le texte et entraînant la flèche.

Arrow chip button

2640Arrow chip buttonBoutonsUn bouton d'action arrondi avec une flèche lumineuse ancrée à son extrémité droite qui se soulève de la page au survol avec une ombre décalée dure et coule à la pression.

Arrow wipe button

2683Arrow wipe buttonBoutonsUn bouton de pilule dont la plaque d'accent, découpée en pointe de flèche, balaye depuis la gauche en survol et inverse l'étiquette lettre par lettre lorsque sa pointe se croise.

Converging chevron button

2684Converging chevron buttonBoutonsDeux plaques en forme de flèche arrivent des côtés opposés et se rejoignent au milieu du bouton, le scellant derrière l'étiquette.

Sliding send button

2704Sliding send buttonBoutonsUn bouton d'envoi plat qui glisse directement au survol tandis que l'espace entre son étiquette et sa flèche s'ouvre, recule de quelques pixels sous pression et se stabilise en partant.

Underline sweep link

2729Underline sweep linkBoutonsUn bouton de texte nu dont la règle s'étend de la gauche au survol et recule vers la droite à la sortie, avec une longue flèche qui s'étend vers l'avant.

Round lift action button

2777Round lift action buttonBoutonsUn bouton d'action circulaire avec une flèche triangulaire pleine qui gonfle et se soulève en survol, s'assombrit lorsqu'il est maintenu enfoncé et tourne sa flèche vers l'une des quatre directions.

Comparer ces composants

Choisissez selon le comportement et la mise en page, puis vérifiez les frameworks disponibles et les conditions d’accès sur la page de chaque composant.

Anchored site preview
Un aperçu en survol dont le côté, l'alignement et le décalage peuvent être composés, avec une flèche pointante qui suit l'ancre et se retourne avec elle lorsqu'il n'y a pas de place.
Arrow chip button
Un bouton d'action arrondi avec une flèche lumineuse ancrée à son extrémité droite qui se soulève de la page au survol avec une ombre décalée dure et coule à la pression.
Arrow relay badge pill
Un bouton de pilule avec un badge rond à gauche dont la flèche sort par le coin supérieur en survol tandis qu'un nouveau arrive par le bas et le corps devient presque noir.

Conseils de design

Ouvrir l’index complet

Étiquettes

3d (16)accessible (4)accordion (9)action (3)actions (6)activity (5)add (7)admin (12)agent (12)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)billing (10)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 (7)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 (4)columns (3)combobox (4)command palette (3)commercial (10)compact (8)comparison (8)composer (4)concentric (4)confetti (4)confirm (24)confirmation (7)console (5)contact (3)context menu (4)controlled-state (18)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)customer (13)cycle (6)dark (15)dark mode (4)dashboard (9)dashed (5)data (13)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 (13)finance (10)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 (50)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)log (3)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)product (6)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 (4)registration (3)relay (3)relief (6)remove (3)reorder (3)resize (4)restore (3)retro (4)retry (3)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 (21)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)workflow (18)workspace (36)wrapper (3)zoom (4)