Componentes

foco

Explore prévias interativas, encontre os componentes ideais e incorpore componentes abertos ao seu projeto com o código-fonte incluído.

Crie com um guia Conecte seu agente Explorar modelos de páginas

19 de 19

1529Floating label inputCampos de entradaUm campo de texto cujo rótulo fica dentro da caixa e sobe até a borda superior quando o campo está em foco ou quando o campo tem um valor, com aparência em foco, válida e inválida.

1564Frame iconÍconesUm visor cujos quatro cantos arredondados giram em torno de um ponto central fixo.

1678Corner flood buttonBotõesUm botão retangular escuro com um pequeno chip colorido estacionado na metade do canto superior esquerdo que incha até inundar toda a face quando o botão é acionado.

1697Focus in revealAnimaçãoUma revelação que deixa o conteúdo fora de foco e o deixa mais nítido à medida que entra na visualização, com um atraso opcional por item para uma pilha de linhas.

1764Bracket lock cursorCursorUm ponteiro personalizado de quatro colchetes de canto que gira enquanto está ocioso e se abre em torno de qualquer elemento marcado como alvo.

1843Blur fade revealRolagemConteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.

1876Pointer Spotlight PanelCartõesUm painel de conteúdo com uma luz suave que segue o ponteiro em sua face e fixa no centro no foco do teclado.

1882Scroll focus columnRolagemUma coluna de rolagem onde cada linha desaparece e diminui à medida que sai da faixa de leitura e volta à presença total ao entrar, de modo que apenas o meio fica totalmente sólido.

1910Anchored detail popoverSobreposiçõesUm botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.

1964Focus Guard FormFormuláriosUm formulário que, em caso de falha no envio, cancela o envio, move o foco do teclado diretamente para o primeiro campo inválido e anuncia o problema para usuários de leitores de tela.

1983Instant Hint TooltipSobreposiçõesUm pequeno rótulo que desaparece e aumenta de tamanho ao lado de um elemento ao passar o mouse ou ao focar no teclado, fornecendo uma dica rápida sem adicionar confusão visível.

2155Focus LensAnimaçãoUma forma delineada que permanece suave e fora de foco em todos os lugares, exceto em um pequeno círculo que segue o ponteiro, onde fica nítido.

2458Underline hint tooltipSobreposiçõesUma palavra sublinhada com ponto que revela um pequeno balão de dica acima ou abaixo dela ao passar o mouse ou ao focar no teclado, impulsionada inteiramente por CSS.

2535Skewed slab buttonBotõesUm botão de placa recortada que fica ligeiramente transparente e ganha força total ao passar o mouse, aumentando o foco do teclado.

2581Tilting send buttonBotõesUm botão de envio claro cujo glifo aponta para cima no foco do teclado e forma um arco para fora da borda quando disparado e depois é reiniciado.

2649Label icon swap buttonBotõesUm botão de pílula que desliza seu rótulo para fora e uma seta na bandeja ao passar o mouse ou focar e, em seguida, executa uma batida curta e repetida na seta enquanto está focado.

2722Ring halo buttonBotõesUm botão de destaque sólido que escurece ao passar o mouse e cresce em um anel de contorno concêntrico com um tom de cor suave por baixo.

2821Scroll focus revealEfeitos de textoUm parágrafo começa inclinado, escuro e desfocado, depois se endireita e fica mais nítido, palavra por palavra, à medida que o leitor o percorre.

2827Highlight focus swapEfeitos de textoAs palavras em uma frase se revezam sendo nítidas enquanto o resto fica desfocado, com uma moldura de colchete brilhante deslizando para a caixa em qualquer palavra que esteja em foco.

Compare estes componentes

Escolha pelo comportamento e pelo layout; depois confira os frameworks disponíveis e os requisitos de acesso na página de cada componente.

Anchored detail popover
Um botão de gatilho que abre um pequeno painel ancorado contendo um formulário de configurações intitulado, saindo da borda do gatilho e fechando em Escape ou em um clique externo.
Blur fade reveal
Conteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.
Bracket lock cursor
Um ponteiro personalizado de quatro colchetes de canto que gira enquanto está ocioso e se abre em torno de qualquer elemento marcado como alvo.

Orientações de design

Abrir o índice completo

Etiquetas

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)