Componentes

toggle

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

36 de 65

Carregando o índice completo de busca.

1533Morph menu iconÍconesUm botão de menu cujas três barras se transformam em uma cruz e voltam, com a linha do meio retraindo enquanto as duas externas se cruzam.

Day night sweep toggle

1631Day night sweep toggleBotõesUm botão de ícone que alterna um painel de configurações entre claro, escuro e automático, repintando-o com uma borda cortada que se espalha em vez de esmaecer.

Format toggle button

1634Format toggle buttonBotõesUm botão de ícone que mantém um estado ligado ou desligado, desbotando uma placa arredondada atrás de seu glifo quando pressionado.

1640Latching icon toggleBotõesUm botão quadrado que liga e desliga: uma placa preenchida aparece, o glifo é trocado por sua contraparte correspondente e uma legenda ao lado explica o estado em palavras.

Dismiss exit card

1770Dismiss exit cardAnimaçãoUma carta que encolhe e desaparece ao sair e volta quando restaurada, com o layout ao redor mantido imóvel para que nada salte.

Check draw toggle

1932Check draw toggleCampos de entradaUma caixa de seleção quadrada cuja marca de seleção se desenha traço por traço quando marcada, com um toque suave e escala flutuante.

Chevron flip tile

1936Chevron flip tileBotõesUm bloco de ícone quadrado cuja divisa se articula e reabre apontando para o outro lado, cada metade girando na junta onde se encontram.

Elastic toggle switch

1954Elastic toggle switchCampos de entradaUm botão de alternância de pílula cujo polegar redondo se comprime em uma bolha enquanto pressionado e volta a girar com um salto suave, deslizando entre um estado neutro desligado e um preenchimento de destaque sólido.

FAQ Accordion

1956FAQ AccordionExibição de dadosUma lista vertical de títulos de perguntas em que a abertura de um painel exibe sua resposta e fecha o painel que estava aberto antes dele.

1980Icon crossfade switchCampos de entradaUm botão de alternância cujo ícone de polegar desaparece e se transforma em um ícone diferente conforme o botão alterna entre desligado e ligado.

Bookmark save chip

2115Bookmark save chipBotõesUm chip de salvamento compacto cuja marca de marcador passa do contorno ao preenchimento e dá um pequeno puxão para baixo no momento em que um item é salvo.

Metric switch bar chart

2280Metric switch bar chartGráficosUm gráfico de barras diário denso com dois blocos métricos no cabeçalho; clicar em um bloco transforma as barras nessa métrica.

Bubble burst menu

2309Bubble burst menuNavegaçãoUma pílula com logotipo flutuante e um botão que se expande em uma sobreposição em tela inteira de links de pílulas grandes, cada um se encaixando com um movimento elástico.

Circle reveal sidebar

2318Circle reveal sidebarNavegaçãoUm painel de menu que se abre como um círculo crescendo a partir de sua própria alternância, com linhas surgindo em sequência e as barras de alternância dobrando-se em uma cruz.

Drawn check checkbox

2343Drawn check checkboxCampos de entradaUma caixa de seleção cuja marca de seleção se desenha traço por traço à medida que a caixa é preenchida com uma cor sólida de destaque.

Key Turn Chip

2373Key Turn ChipBotõesUm pequeno chip preenchido cujo glifo de chave balança como se estivesse procurando um bloqueio ao pairar, depois gira um quarto e desbloqueia ao clicar.

Labeled checkbox

2375Labeled checkboxCampos de entradaUma pequena caixa de seleção quadrada emparelhada com um rótulo de texto, mostrada simples, com texto auxiliar, desativada e como um cartão que destaca sua borda quando marcada.

Add Then Confirm Chip

2466Add Then Confirm ChipBotõesUm chip escuro com um rótulo quente cujo sinal de mais balança de um lado para o outro ao passar o mouse, depois gira em uma marca e informa o item adicionado.

Breathing transport toggle

2470Breathing transport toggleBotõesUm chip de reprodução colorido que alterna entre reproduzir e pausar ao clicar, seu glifo respira enquanto o ponteiro repousa sobre ele.

Counting follow chip

2472Counting follow chipBotõesUm chip delineado que emparelha um rótulo com uma contagem de seguidores, rolando os dígitos alterados para cima através de uma janela mascarada quando travado e de volta para baixo quando liberado.

Follow latch chip

2473Follow latch chipBotõesUm chip de acompanhamento que visualiza seu estado preenchido ao passar o mouse e trava ao clicar, trocando para um prompt de deixar de seguir em um tom de aviso quando pairado novamente.

Follow count swipe

2492Follow count swipeBotõesUma pílula de acompanhamento delineada cujo emblema redondo desliza para o final ao passar o mouse, pintando uma faixa que revela a contagem de seguidores; clicar confirma o seguimento com um carimbo e aumenta a contagem.

Cross morph menu button

2502Cross morph menu buttonBotõesUm ícone de menu fino de três barras que se dobra em uma cruz fechada, as barras externas viajando para a linha central antes de serem cortadas e recoloridas.

Pivot bars menu button

2503Pivot bars menu buttonBotõesUm botão de menu cujas três barras irregulares giram um quarto de volta e encolhem em uma pequena coluna de pontos, mudando de cor à medida que avançam.

Plus to cross tile

2512Plus to cross tileBotõesUm pequeno ladrilho quadrado com um sinal de mais que gira quarenta e cinco graus em uma cruz fechada e aumenta uma fração à medida que gira.

Expanding disc mute toggle

2520Expanding disc mute toggleBotõesUm ícone redondo alterna onde um disco escuro cresce a partir do centro para engolir a face pastel, transformando o glifo em claro à medida que passa por baixo.

Captioned Like Button

2550Captioned Like ButtonBotõesUm botão de coração apenas com ícone que revela uma legenda subindo por baixo ao passar o mouse ou focar e preenche sólido com uma ultrapassagem rápida quando gostado.

Collapsing share button

2553Collapsing share buttonBotõesUma pílula rotulada que se reduz a um glifo redondo enquanto uma tira de blocos de links flutua no espaço deixado.

Bookmark save toggle

2575Bookmark save toggleBotõesUm chip de salvamento compacto cujo glifo de marcador é preenchido de forma sólida e mantém uma borda fina quando o item é salvo.

Glass tube element tile

2607Glass tube element tileBotõesUm bloco quadrado selecionável emoldurado como um tubo de vidro iluminado, com um símbolo de elemento dentro que brilha ao passar o mouse e trava quando selecionado.

Chat launcher morph

2675Chat launcher morphBotõesUm lançador redondo cujo contorno do balão de fala se redesenha em uma marca estreita enquanto seus três pontos diminuem.

Heartbeat like button

2686Heartbeat like buttonBotõesUm botão redondo cujo coração cresce pairando com uma batida constante; clicando nas travas que gostou e marca a contagem ao lado dele.

Mood swap button

2719Mood swap buttonBotõesUm botão redondo segurando um rosto desenhado que muda de expressão ao passar o mouse e pressionar e, em seguida, bloqueia o clima quando clicado.

Bounce drop toggle

2759Bounce drop toggleCampos de entradaUma chave seletora vertical alta cuja bola cai para o fundo com um movimento saltitante quando desligada e desliza de volta para cima com uma mola apertada quando ligada.

Layout toggle switch

2771Layout toggle switchCampos de entradaUma chave cujo botão cruza a trilha animando uma mudança de layout real em vez de uma tradução, para que o lançamento permaneça exato em qualquer largura da trilha.

Latching square toggle

2808Latching square toggleCampos de entradaUm botão de ícone quadrado compacto que fica entre um estado desligado com contorno fraco e um estado pressionado sólido e cheio de acentos.

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.

Add Then Confirm Chip
Um chip escuro com um rótulo quente cujo sinal de mais balança de um lado para o outro ao passar o mouse, depois gira em uma marca e informa o item adicionado.
Bookmark save chip
Um chip de salvamento compacto cuja marca de marcador passa do contorno ao preenchimento e dá um pequeno puxão para baixo no momento em que um item é salvo.
Bookmark save toggle
Um chip de salvamento compacto cujo glifo de marcador é preenchido de forma sólida e mantém uma borda fina quando o item é salvo.

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)