Componentes

Mensagens de status

Notificações, progresso, banners e estados vazios que informam o resultado.

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

36 de 43

Carregando o índice completo de busca.

Progress ring

1538Progress ringMensagens de statusUm medidor circular que vai de zero até seu valor enquanto o número no meio conta, com duas marcas de limite que acendem conforme o arco passa por elas.

Empty State Panel

1922Empty State PanelMensagens de statusUm espaço reservado centralizado mostrado no lugar de uma lista vazia, com título, descrição e uma ou duas ações iniciais.

Click ripple burst

1937Click ripple burstMensagens de statusUm efeito de feedback de ponteiro que gera uma breve forma animada exatamente onde o usuário clica ou toca.

Count badge cluster

1945Count badge clusterMensagens de statusUma fileira de comprimidos de palavras e tokens numéricos compactos para rotular ou contar coisas em linha.

Dot matrix status pill

1950Dot matrix status pillMensagens de statusUm botão de pílula cujo lado esquerdo é uma grade de cinco por cinco pontos reproduzindo um padrão de loop curto para cada estado, com a legenda trocando de passo.

Fill progress loading text

1958Fill progress loading textMensagens de statusUm rótulo de carregamento é um contorno tênue de si mesmo, enquanto uma cópia de cor sólida o preenche a partir da esquerda, como uma barra de progresso no formato da palavra, movendo-se para frente e para trás enquanto o trabalho acontece.

Fill sweep loading text

1959Fill sweep loading textMensagens de statusUma etiqueta de carregamento cujo contorno tênue fica sob uma cópia totalmente colorida que entra da esquerda, atinge toda a largura e drena de volta, repetindo-se enquanto algo é carregado.

Hairline Tone Badge

1977Hairline Tone BadgeMensagens de statusUm rótulo de comprimido não preenchido cuja borda e texto compartilham a mesma cor, de modo que uma fileira deles parece uma legenda impressa.

Labeled progress bar

1988Labeled progress barMensagens de statusUma trilha de progresso rotulada cujo preenchimento atinge uma nova largura enquanto uma leitura percentual conta suavemente para corresponder.

Layered ring loader

1989Layered ring loaderMensagens de statusUm emblema centralizado de anéis parciais concêntricos girando em diferentes velocidades e direções, com um título de status e um subtítulo desaparecendo abaixo.

Left Rule Notice

1990Left Rule NoticeMensagens de statusUma mensagem silenciosa em caixa cujo tom é transmitido por uma única régua colorida e grossa que desce pela borda esquerda.

Milestone progress track

1998Milestone progress trackMensagens de statusUma trilha de progresso marcada em intervalos trimestrais, com um grande número de contagem acima e marcas passadas que ficam mais claras.

Quiet Ring Spinner

2020Quiet Ring SpinnerMensagens de statusUm anel de carregamento mínimo de elemento único: um círculo fino com um quarto colorido que gira continuamente para marcar um estado ocupado.

Scroll Position Progress Bar

2029Scroll Position Progress BarMensagens de statusUma barra fina que cresce na largura de um contêiner conforme o usuário o rola do início ao fim.

Segmented progress meter

2032Segmented progress meterMensagens de statusUm medidor de progresso desenhado como uma fileira de entalhes que acendem por sua vez, com um entalhe inicial parcialmente preenchido e uma legenda nomeando o estágio atual.

Solid Ring Spinner

2047Solid Ring SpinnerMensagens de statusUm indicador de carregamento em caixa acolchoado: um anel grosso com uma borda colorida girando a uma velocidade linear constante dentro de um painel arredondado.

Spring Fill Progress

2051Spring Fill ProgressMensagens de statusUma trilha de progresso estreita cujo preenchimento desliza para cada novo valor em uma mola, com uma leitura que conta junto com ela.

Stacked notification drawer

2055Stacked notification drawerMensagens de statusUma pilha compacta de cartões de notificação que se esconde atrás do cartão superior até pairar e, em seguida, se espalha em uma lista totalmente legível antes de voltar ao normal.

Status Alert Banner

2057Status Alert BannerMensagens de statusUm banner com borda que combina um ícone com um título e uma descrição opcional para exibir um estado de sucesso ou erro in-line.

Breathing dot loader

2117Breathing dot loaderMensagens de statusPontos que permanecem parados e respiram em vez de se moverem, inchando e escurecendo, de modo que a linha parece um batimento cardíaco lento.

Click spark burst

2122Click spark burstMensagens de statusCada pressão lança um anel de linhas curtas a partir do ponto exato de contato, cada uma se esticando e encolhendo até virar nada enquanto voa.

Content Loading Card

2129Content Loading CardMensagens de statusUm espaço reservado em forma de cartão que respira com um pulso lento de opacidade enquanto um grande bloco de imagem e duas linhas de texto ainda estão sendo carregados.

Curtain line loader

2138Curtain line loaderMensagens de statusUma cortina de carregamento que se esconde atrás de uma linha brilhante, mostrando o conteúdo final em vez de esmaecê-lo.

Empty State Panel

2148Empty State PanelMensagens de statusUm painel centralizado para uma lista ou visualização vazia, com uma pilha de ícones em leque, um título, uma linha de suporte e um botão de ação principal.

Expanding ring loader

2151Expanding ring loaderMensagens de statusAnéis finos que crescem a partir de um único ponto e desaparecem à medida que se alargam, lançados um após o outro para que o pulso nunca pare.

Hopping dot loader

2167Hopping dot loaderMensagens de statusUma pequena fileira de pontos que saltam em uma onda itinerante, cada um saindo do chão uma batida após o ponto ao lado.

Infinite loop path loader

2171Infinite loop path loaderMensagens de statusUm carregador em forma de oito onde um segmento brilhante desenha indefinidamente em torno de uma trilha tênue, sua cabeça e cauda se movendo em velocidades diferentes para que o painel respire.

Loading Placeholder Blocks

2184Loading Placeholder BlocksMensagens de statusBlocos de espaço reservados arredondados e escuros que representam um avatar e linhas de texto empilhadas enquanto o conteúdo é carregado, com uma faixa de luz diagonal passando por eles em sincronia.

Segment Fade Spinner

2224Segment Fade SpinnerMensagens de statusUm indicador de carregamento de oito segmentos radiais que aparecem e desaparecem gradualmente em sequência, de modo que um arco brilhante parece perseguir-se ao redor do anel.

2231Single glyph spinnerMensagens de statusUm girador de anel mínimo: um arco fino que gira continuamente para sinalizar que uma tarefa em segundo plano está em execução.

Stacked Alert Toasts

2239Stacked Alert ToastsMensagens de statusUma pilha de brindes ancorada nos cantos, onde novas notificações são compactadas atrás do cartão mais recente e toda a pilha se expande em uma lista legível ao passar o mouse.

Stacked notification tray

2240Stacked notification trayMensagens de statusUma pilha de cartões de notificação em estilo de telefone que se espalha em uma lista legível quando tocada e se transforma em um único baralho.

Status cycle pill

2246Status cycle pillMensagens de statusUm tablet que percorre os estados inativo, funcional, concluído e de erro a cada toque, trocando seu rótulo, ícone e cor com uma rápida transição pop.

Step goal progress bar

2247Step goal progress barMensagens de statusUma barra de progresso arredondada que rastreia as etapas concluídas de um total, mostrando um rótulo de fração acima de um preenchimento suavemente animado.

Sweeping progress bar

2250Sweeping progress barMensagens de statusUma barra de carregamento indeterminada em uma estrutura em forma de pílula, crescendo do nada até a largura total e voltando ao nada em um loop suave e infinito.

Plan limit alert

2880Plan limit alertMensagens de statusMostre o armazenamento disponível e permita salvar um limite ou solicitar uma revisão do plano.

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.

Empty State Panel
Um espaço reservado centralizado mostrado no lugar de uma lista vazia, com título, descrição e uma ou duas ações iniciais.
Breathing dot loader
Pontos que permanecem parados e respiram em vez de se moverem, inchando e escurecendo, de modo que a linha parece um batimento cardíaco lento.
Click ripple burst
Um efeito de feedback de ponteiro que gera uma breve forma animada exatamente onde o usuário clica ou toca.

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)