Componentes

badge

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

21 de 21

Crossing ripple tile

1679Crossing ripple tileBotõesUm bloco de emblema quadrado onde dois pontos correm de bordas opostas, incham em círculos sobrepostos que inundam o rosto e desenrolam uma legenda abaixo.

Hard shadow store badge

1705Hard shadow store badgeBotõesUm crachá de loja quadrado sobre uma sombra sólida deslocada que se aproxima ao pairar, varre uma faixa de luz sobre si mesmo e fica plano quando pressionado.

Ringing bell badge

1740Ringing bell badgeBotõesUm botão de sino de notificação desenhado a partir de formas simples que oscila para os dois lados com um chute em pequena escala e carrega uma contagem ao vivo de não lidos.

Rising Fill Badge

1741Rising Fill BadgeBotõesUm ladrilho quadrado cujo emblema redondo encolhe e sobe enquanto um grande círculo sobe de baixo para cima e uma legenda surge no espaço que deixa.

Brushed Metal Pass

1845Brushed Metal PassCartõesUm cartão de acesso cuja face de metal escovado carrega uma faixa especular que oscila com o ponteiro, sobre uma superfície de ruído ondulada e granulação fina.

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.

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.

Glare Pass Text

1967Glare Pass TextEfeitos de textoTexto de etiqueta silenciado que capta periodicamente uma faixa estreita de luz deslizando sobre ele, como um brilho refletido no vidro, e depois silencia antes de ser repetido.

Gradient shift text

1970Gradient shift textEfeitos de textoUma pílula arredondada cujo texto é preenchido com um gradiente de duas cores que percorre continuamente as letras lateralmente.

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.

Sliding digit counter

2042Sliding digit counterExibição de dadosUm total que é contado rolando cada coluna de dígitos no lugar enquanto uma estrela se enche ao lado dela e explode algumas partículas quando pousa.

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.

Rotating badge text

2217Rotating badge textEfeitos de textoUma frase curta e repetida é organizada letra por letra em torno de um círculo completo e gira lenta e continuamente, como um crachá carimbado ou uma etiqueta de vinil.

Spinning text ring

2238Spinning text ringEfeitos de textoUma frase curta e repetida definida letra por letra em torno de um círculo que gira continuamente no lugar, como a borda de uma moeda ou um selo.

2245Status AvatarExibição de dadosUm avatar redondo que volta às iniciais sem imagem e pode carregar um pequeno crachá de status online ou empilhá-lo com outros.

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.

Outset ring tilt button

2544Outset ring tilt buttonBotõesUm botão em forma de crachá com um anel grosso flutuando fora de sua borda que cresce, inclina alguns graus e deixa cair uma sombra forte ao passar o mouse.

Arrow relay badge pill

2601Arrow relay badge pillBotõesUm botão de comprimido com um emblema redondo à esquerda cuja seta sai pelo canto superior ao passar o mouse enquanto uma nova chega por baixo e o corpo fica quase preto.

Orbiting caption disc

2613Orbiting caption discBotõesUm botão circular cuja legenda em maiúscula percorre a borda interna em uma órbita lenta e interminável, enquanto um emblema central retransmite sua seta ao passar o mouse.

2716Icon badge sendBotõesUm botão de envio arredondado cujo glifo fica em um emblema circular translúcido que brilha e gira enquanto o botão inteiro se levanta ao passar o mouse e se estabiliza ao ser pressionado.

Looping text ribbon

2828Looping text ribbonEfeitos de textoUma fita colorida carrega uma frase repetida ao longo de um caminho ondulado, circular ou arqueado, rolando indefinidamente como um selo ou distintivo.

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.

Arrow relay badge pill
Um botão de comprimido com um emblema redondo à esquerda cuja seta sai pelo canto superior ao passar o mouse enquanto uma nova chega por baixo e o corpo fica quase preto.
Brushed Metal Pass
Um cartão de acesso cuja face de metal escovado carrega uma faixa especular que oscila com o ponteiro, sobre uma superfície de ruído ondulada e granulação fina.
Count badge cluster
Uma fileira de comprimidos de palavras e tokens numéricos compactos para rotular ou contar coisas em linha.

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)