Aller au contenu
Fieldbook
Menu
Se connecter
FR

Composants

clair

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 guideConnectez votre agentExplorer les modèles de pages

22 sur 22

Day night sweep toggle
1631Day night sweep toggleBoutonsUn bouton icône qui fait alterner un panneau de paramètres entre clair, sombre et automatique, en le repeignant avec un bord coupé dur qui balaie au lieu d'un fondu.
Drifting Light Beams
1688Drifting Light BeamsArrière-plansDe hautes barres de lumière inclinées dérivent vers le haut à différentes vitesses et se confondent pour former une brume qui se déplace lentement.
Light beam slats
1715Light beam slatsArrière-plansDe longues lattes diagonales glissent les unes sur les autres dans l'obscurité, chacune captant une bande de lumière lorsqu'elle se croise afin que le panneau respire comme un store éclairé.
Light column beam
1716Light column beamArrière-plansUne seule colonne de lumière se dresse dans un cadre sombre, respirant en largeur tandis que sa texture intérieure défile vers le haut à travers un dégradé de deux couleurs.
Overhead light rays
1726Overhead light raysArrière-plansDe douces poutres effilées sont suspendues au-dessus d'un panneau, chacune s'estompant et se balançant doucement selon son propre cycle afin que le groupe ne vibre jamais ensemble.
Prismatic light bands
1736Prismatic light bandsArrière-plansUn panneau de toile sombre où quelques longues bandes de lumière balayent et se courbent à travers le champ, se divisant en franges chaudes et froides sur leurs bords comme un faisceau à travers un prisme.
Spotlight shafts
1750Spotlight shaftsArrière-plansDes rayons de lumière s'étendent depuis un point situé sur un bord du cadre, inspirant et expirant et se dirigeant vers le pointeur.
Streak border button
1752Streak border buttonBoutonsUn bouton de pilule avec un point lumineux doux glissant le long de ses bords supérieur et inférieur, les deux stries se déplaçant dans des directions opposées.
Light cone beam
1992Light cone beamArrière-plansUn coin de lumière granuleuse jaillit d’une ligne chaude au pied du cadre, tournant lentement pour que ses bords prennent différentes couleurs.
Orbiting rim light button
2009Orbiting rim light buttonBoutonsUne pilule sombre dont le bord d'un pixel est éclairé par derrière par un cône de couleur qui tourne lentement, tournant plus vite lorsque le bouton est maintenu enfoncé.
Corner light rays
2132Corner light raysArrière-plansDe larges rayons de lumière jaillissent d’un coin, deux éventails teintés se croisant sous des angles légèrement différents et respirant lentement.
Luminous ribbon field
2187Luminous ribbon fieldArrière-plansUne toile de fond en toile où quelques rubans lumineux s'entrelacent sur le cadre, se rétrécissant en pointes sur les deux bords et s'épanouissant vers le blanc là où ils se croisent.
Molded key send button
2191Molded key send buttonBoutonsUn bouton d'envoi moulé à partir de la page elle-même : une coque extérieure surélevée contenant une pilule intérieure encastrée avec un avion en papier et une étiquette.
Soft relief send button
2519Soft relief send buttonBoutonsUn bouton d'envoi moulé dans une surface claire : un bord bicolore autour d'un coussin intérieur doux avec un glyphe d'envoi rempli qui s'enfonce à plat lorsqu'il est tenu.
Ivory keycap button
2561Ivory keycap buttonBoutonsUn capuchon de touche pâle surélevé sur un rebord assorti ; le vol stationnaire épaissit son bord encastré et la pression le place au ras de la surface.
Breathing Inset Button
2579Breathing Inset ButtonBoutonsUn bouton moulé pâle dont le panneau intérieur s'éloigne du bord en survol tandis que le glyphe d'envoi glisse sur une courte distance vers l'étiquette.
Perspective sheen button
2582Perspective sheen buttonBoutonsUn bouton rectangulaire solide portant un panneau brillant translucide incliné en perspective qui s'aplatit au survol.
Capsule in frame button
2583Capsule in frame buttonBoutonsUn plateau extérieur bordé contenant une capsule intérieure flottante qui s'enfonce dans le cadre sur la longueur d'une presse.
Light pool button
2612Light pool buttonBoutonsUn bouton de signe de tube allumé qui répand une piscine floue de sa propre couleur sur la surface située en dessous et échange la figure contre le sol lorsqu'il est survolé ou focalisé.
Overhead light pill
2650Overhead light pillBoutonsUn bouton de pilule sombre éclairé par un doux bassin de lumière au plafond, qui s'assombrit dans son ensemble en survol et éclaircit son épais anneau extérieur lors de la mise au point.
Translucent wash button
2673Translucent wash buttonBoutonsUne capsule profonde éclairée du milieu par un disque blanc translucide qui dépasse ses bords en survol ou en mise au point, teintant le visage plus lumineux au lieu de le couvrir, puis draine la lumière vers l'intérieur.
Keycap press button
2717Keycap press buttonBoutonsUn capuchon de touche pâle avec une épaisseur réelle, construit à partir d'ombres dures empilées, qui descend et perd de la hauteur lorsqu'on appuie dessus.

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.

  • Corner light rays

    De larges rayons de lumière jaillissent d’un coin, deux éventails teintés se croisant sous des angles légèrement différents et respirant lentement.

  • Day night sweep toggle

    Un bouton icône qui fait alterner un panneau de paramètres entre clair, sombre et automatique, en le repeignant avec un bord coupé dur qui balaie au lieu d'un fondu.

  • Drifting Light Beams

    De hautes barres de lumière inclinées dérivent vers le haut à différentes vitesses et se confondent pour former une brume qui se déplace lentement.

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)