Composants

settings

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

21 sur 21

Sheet drawer

1540Sheet drawerSuperpositionsUn panneau coulissant qui surgit d'un bord sur un fond sombre, maintient le focus à l'intérieur et se ferme sur Échap, sur le bouton de fermeture ou en tirant sur son en-tête.

1607Sliders iconIcônesTrois rails avec des poignées qui se déplacent les uns après les autres, disposés en travers ou en bas de la grille.

Anchored settings popover

1913Anchored settings popoverSuperpositionsUn bouton qui ouvre un petit panneau de paramètres ancré à côté, grandissant à partir du coin le plus proche de son déclencheur et retournant les côtés lorsque l'espace est épuisé.

Settings Group Accordion

2034Settings Group AccordionAffichage des donnéesUn groupe vertical de sections étiquetées qui peuvent chacune s'étendre indépendamment, de sorte que plusieurs restent ouvertes à la fois, contrairement à un accordéon typique à ouverture unique.

Spring Push Collapsible

2052Spring Push CollapsibleAffichage des donnéesUne ligne de paramètres qui ouvre un panneau de détails et pousse les lignes situées en dessous vers le bas sur un ressort partagé au lieu d'un saut en hauteur.

Underline tabs

2077Underline tabsNavigationUne rangée d'onglets de section avec une barre colorée qui glisse et se redimensionne sous l'étiquette active au lieu d'un arrière-plan rempli.

Edge-slide panel

2146Edge-slide panelSuperpositionsUn panneau de paramètres qui s'appuie contre le bord de l'écran tandis que la page située derrière s'assombrit et se brouille.

Grouped settings dropdown

2163Grouped settings dropdownNavigationUne liste déroulante déclenchée par un bouton avec des sections étiquetées, un sous-menu imbriqué et un groupe radio pour choisir l'une des nombreuses valeurs de paramètres.

Sliding height tabs

2233Sliding height tabsNavigationLes onglets encadrés dans une carte où les panneaux de commutation font glisser l'ensemble du contenu sur le côté comme une pellicule tandis que la hauteur de la carte s'adapte au nouveau panneau.

Meshing gears chip

2387Meshing gears chipBoutonsUne puce de réglage avec deux rouages imbriqués qui tournent dans des directions opposées chaque fois que le pointeur est dessus, à des vitesses définies par leur nombre de dents.

Settings toggle switch

2802Settings toggle switchChamps de saisieUn petit interrupteur marche/arrêt en forme de pilule avec un bouton coulissant qui active un seul réglage, sa piste passant d'un accent sourd à un accent solide tandis que le bouton s'étire comme un élastique s'il est enfoncé à mi-glissière.

Access request inbox

2845Access request inboxSectionsExaminez les demandes d’accès, choisissez un rôle et acceptez ou refusez chaque demande une seule fois.

API key lifecycle panel

2847API key lifecycle panelSectionsExaminez un identifiant API d’exemple et confirmez sa rotation ou sa révocation par des étapes explicites.

Connected apps manager

2854Connected apps managerSectionsExaminez les accès des applications et connectez ou déconnectez des intégrations d’exemple.

Environment variable editor

2860Environment variable editorFormulairesModifiez les valeurs par environnement et validez les noms avant de préparer une révision.

Invitation review panel

2870Invitation review panelCartesExaminez une invitation, choisissez un rôle et acceptez ou refusez avec un résultat visible.

Notification preferences

2876Notification preferencesFormulairesChoisissez les options de notification et enregistrez un résumé lisible des préférences.

Onboarding checklist

2877Onboarding checklistSectionsSuivez les tâches de configuration et ouvrez l’espace une fois toutes les exigences remplies.

Organization settings page

2878Organization settings pagePagesModifiez le profil de l’organisation, la région et la durée des sessions avec un résumé enregistré.

Project switcher

2883Project switcherNavigationRecherchez dans une courte liste de projets et changez le projet actif avec un retour visible.

Team permission matrix

2899Team permission matrixAffichage des donnéesComparez les autorisations des rôles et modifiez l’accès au projet dans une matrice.

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.

Access request inbox
Examinez les demandes d’accès, choisissez un rôle et acceptez ou refusez chaque demande une seule fois.
Anchored settings popover
Un bouton qui ouvre un petit panneau de paramètres ancré à côté, grandissant à partir du coin le plus proche de son déclencheur et retournant les côtés lorsque l'espace est épuisé.
API key lifecycle panel
Examinez un identifiant API d’exemple et confirmez sa rotation ou sa révocation par des étapes explicites.

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)