Componentes

Exibição de dados

Tabelas, listas, estatísticas e selos que mostram os dados com clareza.

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

36 de 61

Carregando o índice completo de busca.

1917Avatar Lineup HoverExibição de dadosUma fileira de círculos de avatar sobrepostos onde passar o mouse o eleva acima de seus vizinhos e revela uma dica de nome.

1918Avatar StackExibição de dadosUma linha de avatares circulares sobrepostos que separa e levanta aquele que está sob o ponteiro, revelando uma dica de nome acima dele.

Chevron accordion list

1935Chevron accordion listExibição de dadosUma pilha vertical de linhas de perguntas que se expandem para revelar uma resposta, com uma divisa que vira de cabeça para baixo quando sua linha é aberta.

Count wheel badge

1946Count wheel badgeExibição de dadosUma roda numérica vertical que rola por degraus arredondados até chegar a um total, com uma estrela central que se enche à medida que a contagem aumenta.

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.

Git status file tree

1966Git status file treeExibição de dadosUm navegador de pastas e arquivos aninhados onde cada arquivo alterado carrega uma letra de status git colorida e as pastas trocam o formato do ícone quando abertas.

Glide highlight explorer

1968Glide highlight explorerExibição de dadosUma árvore de pastas e arquivos onde uma única barra de destaque brilhante desliza de uma linha para outra ao passar o mouse ou focar, em vez de cada linha acender sozinha.

Guide steps accordion

1976Guide steps accordionExibição de dadosUm acordeão numerado de etapas-guia cujos painéis podem permanecer montados enquanto estão recolhidos, de modo que um cronômetro dentro de um deles continua contando para fechar e reabrir.

Masked Reveal Accordion

1997Masked Reveal AccordionExibição de dadosUm acordeão cujos painéis são descobertos por uma máscara móvel de bordas rígidas à medida que são abertos, de modo que as respostas aparecem linha por linha em vez de desaparecerem como um bloco.

Multi open panel stack

2001Multi open panel stackExibição de dadosUma pilha de seções do painel que podem ser expandidas de forma independente, com cópia fechada que o navegador find-in-page ainda pode alcançar.

Before/After Code Diff

2113Before/After Code DiffExibição de dadosDois painéis de código lado a lado, rotulados antes e depois, com linhas adicionadas e removidas coloridas e um efeito de foco flutuante.

Concentric goal rings

2128Concentric goal ringsExibição de dadosTrês anéis de progresso aninhados que se desenham em sequência ao lado de uma leitura do valor atual e alvo de cada meta.

Conversation bubbles

2131Conversation bubblesExibição de dadosBalões de conversa exibem suas mensagens com estilos ajustáveis, agrupamento e reações controladas.

Counting metric

2133Counting metricExibição de dadosUm número grande que passa de um valor inicial até seu destino com um movimento suave na primeira vez que é visto, formatado com separadores de milhares e decimais fixos.

Counting readout

2134Counting readoutExibição de dadosUma figura métrica que conta desde um valor inicial até seu destino em uma mola na primeira vez que é vista, com decimais fixos e preenchimento de zeros opcional.

Detail list item

2140Detail list itemExibição de dadosUma linha de lista que combina um ícone ou avatar inicial, um título e uma descrição, e uma ação final, para listas de notificação, menus ou linhas de configurações.

Dotted World Map

2142Dotted World MapExibição de dadosUm mapa-múndi renderizado inteiramente a partir de pequenos pontos, com alguns locais rotulados que pulsam para fora como um sinal de radar.

File attachment chip

2153File attachment chipExibição de dadosUm cartão compacto para um arquivo anexado mostrando um ícone de tipo ou miniatura, seu nome e tamanho, e um upload, processamento, erro ou estado concluído.

Filterable record table

2154Filterable record tableExibição de dadosFiltre dados de clientes, ordene colunas e controle a consulta pela sua aplicação.

2172Initials fallback avatarExibição de dadosUm único avatar que mostra uma foto quando fornecida; caso contrário, centraliza duas letras de iniciais em uma forma de cor suave.

Labeled hairline divider

2178Labeled hairline dividerExibição de dadosUma régua fina que separa duas seções, opcionalmente quebrada para mostrar uma pequena legenda centralizada entre duas linhas curtas.

Nested File Browser

2197Nested File BrowserExibição de dadosUma árvore de arquivos acessível onde várias pastas em diferentes profundidades podem permanecer abertas ao mesmo tempo, unidas por linhas-guia conectadas.

Animated metric counter

2299Animated metric counterExibição de dadosUm grande número simples que surge de um valor inicial até seu destino no momento em que é exibido, ultrapassando um pouco antes de se estabilizar, com separadores de milhares e um sufixo opcional.

Auto-Scroll Message List

2302Auto-Scroll Message ListExibição de dadosUm painel de bate-papo rolável que se mantém fixado na mensagem mais recente, a menos que o leitor role para cima, momento em que um botão flutuante jump-to-latest aparece.

Billing Ledger Table

2304Billing Ledger TableExibição de dadosFiltre os estados das faturas, ordene os valores e recalcule o total visível do registro.

Card Style Invoice Table

2310Card Style Invoice TableExibição de dadosUma tabela de faturas renderizada como um cartão elevado, com a primeira e a última linhas arredondadas para corresponder ao formato do cartão.

Chat message thread

2315Chat message threadExibição de dadosUma conversa baseada em dados mantém visíveis a identidade do remetente e o horário de cada mensagem.

Content Divider Rule

2326Content Divider RuleExibição de dadosUma régua estrutural fina que separa seções empilhadas ou rótulos curtos embutidos sem chamar a atenção para si mesma.

Counting number readout

2328Counting number readoutExibição de dadosUma grande estatística que conta até seu valor em uma curva de desaceleração, escrevendo o texto diretamente em cada quadro para que o layout nunca trema.

Drag reorder checklist

2341Drag reorder checklistExibição de dadosUma lista de verificação cujas linhas podem ser arrastadas para uma nova ordem, com itens marcados desenhando uma marca animada e um tachado.

Endless Feed Loader

2347Endless Feed LoaderExibição de dadosUma lista de estilo de notícias que continua anexando novos lotes de manchetes enquanto um pequeno botão giratório na parte inferior aparece.

Hairline section divider

2363Hairline section dividerExibição de dadosUma regra simples que fecha um título e uma descrição e depois divide uma linha de rótulos simples abaixo dele em segmentos separados.

Height Morph Accordion

2364Height Morph AccordionExibição de dadosUma lista de perguntas cujos painéis de respostas crescem e encolhem até sua altura natural com uma mola, empurrando as linhas abaixo deles.

2369Initials avatar clusterExibição de dadosUma fileira de tokens com iniciais redondas que resumem um grupo de pessoas, terminando em uma contagem excessiva silenciosa para o restante.

Shortcut Key Chip

2374Shortcut Key ChipExibição de dadosPequenos tokens de pílula para teclas individuais que se agrupam em linha para indicar um atalho de teclado.

Credit balance ledger

2856Credit balance ledgerExibição de dadosConsulte créditos da conta e aplique um valor permitido a uma fatura atualizando o saldo.

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.

Animated metric counter
Um grande número simples que surge de um valor inicial até seu destino no momento em que é exibido, ultrapassando um pouco antes de se estabilizar, com separadores de milhares e um sufixo opcional.
Auto-Scroll Message List
Um painel de bate-papo rolável que se mantém fixado na mensagem mais recente, a menos que o leitor role para cima, momento em que um botão flutuante jump-to-latest aparece.
Avatar Lineup Hover
Uma fileira de círculos de avatar sobrepostos onde passar o mouse o eleva acima de seus vizinhos e revela uma dica de nome.

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)