Ventury Desk · design system

VADS

Ateliê operacional para o atendimento do Ventury Desk. Esta página renderiza a biblioteca inteira de packages/design-system: 51 componentes, com cada variante e cada estado nos temas claro e escuro. Os dados são fictícios.

Cores

Tokens de cor por intenção, com o valor resolvido em cada tema. A fonte da verdade é o DESIGN.md.

Superfícies

Fundo geral, painéis, elevação e interação neutra.

Token	Claro	Escuro
`--vads-color-surface-canvas`	`#FAF8F5`	`#171515`
`--vads-color-surface-panel`	`#FFFFFF`	`#211D1B`
`--vads-color-surface-raised`	`#FFFFFF`	`#2B2522`
`--vads-color-surface-subtle`	`#F3EFEB`	`#332C28`
`--vads-color-surface-hover`	`#F3EFEB`	`#332C28`
`--vads-color-surface-pressed`	`#EAE4DE`	`#403833`
`--vads-color-surface-disabled`	`#F3EFEB`	`#332C28`
`--vads-color-surface-logo-plate`	`#FFFFFF`	`#FFFFFF`
`--vads-color-surface-inverse`	`#231F20`	`#F4EEE8`

Texto

Principal, secundário, desabilitado, link e inverso.

Token	Claro	Escuro
`--vads-color-text-primary`	`#231F20`	`#F4EEE8`
`--vads-color-text-secondary`	`#655B54`	`#C9BDB3`
`--vads-color-text-disabled`	`#75685F`	`#B8AA9F`
`--vads-color-text-inverse`	`#FFFFFF`	`#171515`
`--vads-color-text-link`	`#8E3E2F`	`#EDC4B4`

Bordas e foco

Divisores, contorno de controle e anel de foco.

Token	Claro	Escuro
`--vads-color-border-subtle`	`#DDD5CE`	`#49403B`
`--vads-color-border-control`	`#8D7D72`	`#9A8C81`
`--vads-color-border-strong`	`#655B54`	`#C9BDB3`
`--vads-color-focus-ring`	`#A84D3A`	`#E7A58D`

Ação e seleção

Argila na ação principal e na seleção; destrutiva à parte.

Token	Claro	Escuro
`--vads-color-action-primary-bg`	`#A84D3A`	`#E7A58D`
`--vads-color-action-primary-hover`	`#8E3E2F`	`#EDC4B4`
`--vads-color-action-primary-active`	`#743125`	`#D78669`
`--vads-color-action-primary-fg`	`#FFFFFF`	`#35211C`
`--vads-color-selection-bg`	`#FCF1EC`	`#35211C`
`--vads-color-selection-fg`	`#743125`	`#EDC4B4`
`--vads-color-selection-border`	`#A84D3A`	`#E7A58D`
`--vads-color-action-danger-bg`	`#A92B38`	`#FFABB3`
`--vads-color-action-danger-hover`	`#8E2130`	`#FFC8CE`
`--vads-color-action-danger-active`	`#741D28`	`#EC8995`
`--vads-color-action-danger-fg`	`#FFFFFF`	`#40232A`

Semânticas

Sucesso, alerta, erro, informação e neutra. Sempre com ícone e texto.

Token	Claro	Escuro
`--vads-color-semantic-success-fg`	`#226444`	`#8FD6AE`
`--vads-color-semantic-success-bg`	`#EAF4ED`	`#1C3227`
`--vads-color-semantic-success-border`	`#538564`	`#659F7C`
`--vads-color-semantic-warning-fg`	`#81510C`	`#F0C66B`
`--vads-color-semantic-warning-bg`	`#FCF1D9`	`#382D17`
`--vads-color-semantic-warning-border`	`#A57623`	`#BF964B`
`--vads-color-semantic-error-fg`	`#A92B38`	`#FFABB3`
`--vads-color-semantic-error-bg`	`#FDEDEF`	`#40232A`
`--vads-color-semantic-error-border`	`#C05360`	`#CF818B`
`--vads-color-semantic-info-fg`	`#275F89`	`#A0CDEE`
`--vads-color-semantic-info-bg`	`#EBF3FA`	`#1E3040`
`--vads-color-semantic-info-border`	`#5486AA`	`#6F9CBC`
`--vads-color-semantic-neutral-fg`	`#655B54`	`#C9BDB3`
`--vads-color-semantic-neutral-bg`	`#F3EFEB`	`#332C28`
`--vads-color-semantic-neutral-border`	`#8D7D72`	`#9A8C81`

Canais

Indicadores internos do VADS, não cores oficiais das plataformas.

Token	Claro	Escuro
`--vads-color-channel-whatsapp-fg`	`#1D6946`	`#8EDBAB`
`--vads-color-channel-whatsapp-bg`	`#E8F5EC`	`#183326`
`--vads-color-channel-whatsapp-border`	`#1D6946`	`#8EDBAB`
`--vads-color-channel-instagram-fg`	`#983D58`	`#F3ABC0`
`--vads-color-channel-instagram-bg`	`#FCEEF2`	`#3A242D`
`--vads-color-channel-instagram-border`	`#983D58`	`#F3ABC0`
`--vads-color-channel-web-fg`	`#315F7D`	`#A5CBE6`
`--vads-color-channel-web-bg`	`#EDF3F7`	`#23323F`
`--vads-color-channel-web-border`	`#315F7D`	`#A5CBE6`

Status, prioridade e presença

Eixos independentes, cada um com o seu componente.

Token	Claro	Escuro
`--vads-color-status-open-fg`	`#275F89`	`#A0CDEE`
`--vads-color-status-open-bg`	`#EBF3FA`	`#1E3040`
`--vads-color-status-open-border`	`#5486AA`	`#6F9CBC`
`--vads-color-status-waiting-customer-fg`	`#655B54`	`#C9BDB3`
`--vads-color-status-waiting-customer-bg`	`#F3EFEB`	`#332C28`
`--vads-color-status-waiting-customer-border`	`#8D7D72`	`#9A8C81`
`--vads-color-status-waiting-store-fg`	`#81510C`	`#F0C66B`
`--vads-color-status-waiting-store-bg`	`#FCF1D9`	`#382D17`
`--vads-color-status-waiting-store-border`	`#A57623`	`#BF964B`
`--vads-color-status-resolved-fg`	`#226444`	`#8FD6AE`
`--vads-color-status-resolved-bg`	`#EAF4ED`	`#1C3227`
`--vads-color-status-resolved-border`	`#538564`	`#659F7C`
`--vads-color-status-spam-fg`	`#655B54`	`#C9BDB3`
`--vads-color-status-spam-bg`	`#F3EFEB`	`#332C28`
`--vads-color-status-spam-border`	`#8D7D72`	`#9A8C81`
`--vads-color-priority-low-fg`	`#655B54`	`#C9BDB3`
`--vads-color-priority-low-bg`	`#F3EFEB`	`#332C28`
`--vads-color-priority-low-border`	`#8D7D72`	`#9A8C81`
`--vads-color-priority-normal-fg`	`#275F89`	`#A0CDEE`
`--vads-color-priority-normal-bg`	`#EBF3FA`	`#1E3040`
`--vads-color-priority-normal-border`	`#5486AA`	`#6F9CBC`
`--vads-color-priority-high-fg`	`#81510C`	`#F0C66B`
`--vads-color-priority-high-bg`	`#FCF1D9`	`#382D17`
`--vads-color-priority-high-border`	`#A57623`	`#BF964B`
`--vads-color-priority-urgent-fg`	`#A92B38`	`#FFABB3`
`--vads-color-priority-urgent-bg`	`#FDEDEF`	`#40232A`
`--vads-color-priority-urgent-border`	`#C05360`	`#CF818B`
`--vads-color-presence-online-fg`	`#226444`	`#8FD6AE`
`--vads-color-presence-online-bg`	`#EAF4ED`	`#1C3227`
`--vads-color-presence-online-border`	`#538564`	`#659F7C`
`--vads-color-presence-away-fg`	`#81510C`	`#F0C66B`
`--vads-color-presence-away-bg`	`#FCF1D9`	`#382D17`
`--vads-color-presence-away-border`	`#A57623`	`#BF964B`
`--vads-color-presence-offline-fg`	`#655B54`	`#C9BDB3`
`--vads-color-presence-offline-bg`	`#F3EFEB`	`#332C28`
`--vads-color-presence-offline-border`	`#8D7D72`	`#9A8C81`

Balões e skeleton

Autoria das mensagens e áreas em carregamento.

Token	Claro	Escuro
`--vads-color-bubble-customer-fg`	`#231F20`	`#F4EEE8`
`--vads-color-bubble-customer-bg`	`#FFFFFF`	`#211D1B`
`--vads-color-bubble-customer-border`	`#DDD5CE`	`#49403B`
`--vads-color-bubble-agent-fg`	`#231F20`	`#F4EEE8`
`--vads-color-bubble-agent-bg`	`#FCF1EC`	`#35211C`
`--vads-color-bubble-agent-border`	`#DDD5CE`	`#49403B`
`--vads-color-bubble-ai-fg`	`#231F20`	`#F4EEE8`
`--vads-color-bubble-ai-bg`	`#EBF3FA`	`#1E3040`
`--vads-color-bubble-ai-border`	`#5486AA`	`#6F9CBC`
`--vads-color-bubble-note-fg`	`#231F20`	`#F4EEE8`
`--vads-color-bubble-note-bg`	`#FCF1D9`	`#382D17`
`--vads-color-bubble-note-border`	`#A57623`	`#BF964B`
`--vads-color-bubble-system-fg`	`#655B54`	`#C9BDB3`
`--vads-color-bubble-system-bg`	`#FAF8F5`	`#171515`
`--vads-color-bubble-system-border`	`#DDD5CE`	`#49403B`
`--vads-color-skeleton-base`	`#EAE4DE`	`#332C28`
`--vads-color-skeleton-highlight`	`#F3EFEB`	`#403833`

Marca e materiais

Tintas do logo, neutros quentes e Argila. Telas não usam ref.* direto.

Token	Claro	Escuro
`--vads-ref-brand-ink`	`#231F20`	`#231F20`
`--vads-ref-brand-white`	`#FFFFFF`	`#FFFFFF`
`--vads-ref-neutral-0`	`#FFFFFF`	`#FFFFFF`
`--vads-ref-neutral-25`	`#FCFAF8`	`#FCFAF8`
`--vads-ref-neutral-50`	`#FAF8F5`	`#FAF8F5`
`--vads-ref-neutral-100`	`#F3EFEB`	`#F3EFEB`
`--vads-ref-neutral-150`	`#EAE4DE`	`#EAE4DE`
`--vads-ref-neutral-200`	`#DDD5CE`	`#DDD5CE`
`--vads-ref-neutral-300`	`#C6BBB2`	`#C6BBB2`
`--vads-ref-neutral-400`	`#A89B91`	`#A89B91`
`--vads-ref-neutral-500`	`#8D7D72`	`#8D7D72`
`--vads-ref-neutral-600`	`#75685F`	`#75685F`
`--vads-ref-neutral-650`	`#655B54`	`#655B54`
`--vads-ref-neutral-700`	`#574D46`	`#574D46`
`--vads-ref-neutral-800`	`#403833`	`#403833`
`--vads-ref-neutral-850`	`#332C28`	`#332C28`
`--vads-ref-neutral-900`	`#2B2522`	`#2B2522`
`--vads-ref-neutral-925`	`#211D1B`	`#211D1B`
`--vads-ref-neutral-950`	`#171515`	`#171515`
`--vads-ref-clay-50`	`#FCF1EC`	`#FCF1EC`
`--vads-ref-clay-100`	`#F7E2D9`	`#F7E2D9`
`--vads-ref-clay-200`	`#EDC4B4`	`#EDC4B4`
`--vads-ref-clay-300`	`#E7A58D`	`#E7A58D`
`--vads-ref-clay-400`	`#D78669`	`#D78669`
`--vads-ref-clay-500`	`#BF654B`	`#BF654B`
`--vads-ref-clay-600`	`#A84D3A`	`#A84D3A`
`--vads-ref-clay-700`	`#8E3E2F`	`#8E3E2F`
`--vads-ref-clay-800`	`#743125`	`#743125`
`--vads-ref-clay-900`	`#50251D`	`#50251D`
`--vads-ref-clay-950`	`#35211C`	`#35211C`
`--vads-color-brand-identity`	`#231F20`	`#231F20`
`--vads-color-brand-on-identity`	`#FFFFFF`	`#FFFFFF`

Tipografia e escalas

Família, escala tipográfica, sombras, espaçamento, raio, tamanhos, layout e movimento.

Tipografia

Inter em toda a interface; números tabulares em horários, preços, contagens e SLA.

09:44 · Jurema--vads-font-size-caption · 0.75rem / 1rem

Tabela compacta e legendas secundárias--vads-font-size-small · 0.8125rem / 1.25rem

Rótulos, botões e interface desktop--vads-font-size-body · 0.875rem / 1.25rem

Oi! Esse vestido tem no M?--vads-font-size-message · 0.9375rem / 1.5rem

Entrada e leitura principal no celular--vads-font-size-input-mobile · 1rem / 1.5rem

Título de painel--vads-font-size-heading-sm · 1.125rem / 1.5rem

Título de seção--vads-font-size-heading-md · 1.25rem / 1.75rem

Título de página--vads-font-size-heading-lg · 1.5rem / 2rem

Visão geral--vads-font-size-display · 2rem / 2.5rem

R$ 189,90 · 29/09/2026, 10:14 · 1–20 de 84

Sombras

Só com elevação real: menus, popovers, dialogs e drawers.

--vads-shadow-none

Claro

Superfície elevada

Escuro

Superfície elevada

--vads-shadow-sm

Claro

Superfície elevada

Escuro

Superfície elevada

--vads-shadow-md

Claro

Superfície elevada

Escuro

Superfície elevada

--vads-shadow-lg

Claro

Superfície elevada

Escuro

Superfície elevada

Espaçamento

Base 4px com auxiliares de 2px e 6px.

Token	Valor	Amostra
`--vads-space-0`	0rem
`--vads-space-1`	0.125rem
`--vads-space-2`	0.25rem
`--vads-space-3`	0.375rem
`--vads-space-4`	0.5rem
`--vads-space-5`	0.75rem
`--vads-space-6`	1rem
`--vads-space-7`	1.25rem
`--vads-space-8`	1.5rem
`--vads-space-9`	2rem
`--vads-space-10`	2.5rem
`--vads-space-11`	3rem
`--vads-space-12`	4rem
`--vads-space-13`	5rem
`--vads-space-14`	6rem

Raio

Pílula só em badges, avatares e pequenos agrupamentos.

Token	Valor	Amostra
`--vads-radius-none`	0rem
`--vads-radius-xs`	0.25rem
`--vads-radius-sm`	0.375rem
`--vads-radius-md`	0.5rem
`--vads-radius-lg`	0.75rem
`--vads-radius-xl`	1rem
`--vads-radius-pill`	624.938rem

Tamanhos

Alturas mínimas e dimensões nominais de controles.

Token	Valor	Amostra
`--vads-size-compact`	2rem
`--vads-size-default`	2.5rem
`--vads-size-touch`	2.75rem
`--vads-size-large`	3rem
`--vads-size-textarea-min`	6rem
`--vads-size-composer-min`	8rem
`--vads-size-composer-max`	16rem
`--vads-size-table-compact`	2.5rem
`--vads-size-table-default`	3rem
`--vads-size-conversation-compact`	5.5rem
`--vads-size-conversation-default`	6.5rem
`--vads-size-avatar-xs`	1.5rem
`--vads-size-avatar-sm`	2rem
`--vads-size-avatar-md`	2.5rem
`--vads-size-avatar-lg`	3.5rem
`--vads-size-badge`	1.5rem
`--vads-size-checkbox`	1.25rem

Layout

Dimensões de composição: sidebar, inbox, workspace, drawer e dialog.

Token	Valor	Amostra
`--vads-layout-sidebar-expanded`	14rem
`--vads-layout-sidebar-collapsed`	4rem
`--vads-layout-topbar`	4rem
`--vads-layout-topbar-mobile`	3.5rem
`--vads-layout-inbox-list`	21rem
`--vads-layout-properties`	15.5rem
`--vads-layout-conversation-min`	30rem
`--vads-layout-context`	19rem
`--vads-layout-drawer`	25rem
`--vads-layout-filter-drawer`	22.5rem
`--vads-layout-dialog`	30rem
`--vads-layout-command`	40rem
`--vads-layout-content-max`	75rem
`--vads-layout-article-max`	45rem
`--vads-layout-card-min`	16rem
`--vads-layout-menu-min`	14rem
`--vads-layout-logo-full`	10rem
`--vads-layout-logo-plate`	3rem
`--vads-layout-page-desktop`	1.5rem
`--vads-layout-page-mobile`	1rem
`--vads-layout-bubble-min`	10rem
`--vads-layout-bubble-max`	78%
`--vads-layout-bubble-max-mobile`	88%
`--vads-layout-skeleton-long`	72%
`--vads-layout-skeleton-short`	44%

Contornos e ícones

Espessuras de traço e caixas de ícone.

Token	Valor	Amostra
`--vads-stroke-hairline`	1px
`--vads-stroke-emphasis`	2px
`--vads-stroke-focus`	2px
`--vads-stroke-selection`	3px
`--vads-icon-xs`	1rem
`--vads-icon-sm`	1.125rem
`--vads-icon-md`	1.25rem
`--vads-icon-lg`	1.5rem
`--vads-icon-xl`	2rem
`--vads-icon-display`	3rem
`--vads-icon-stroke`	1.75px

Breakpoints e camadas

Media queries compiladas e contrato de z-index.

Token	Valor	Amostra
`--vads-breakpoint-sm`	40rem
`--vads-breakpoint-md`	48rem
`--vads-breakpoint-lg`	64rem
`--vads-breakpoint-xl`	80rem
`--vads-breakpoint-wide`	100rem
`--vads-z-base`	0
`--vads-z-sticky`	10
`--vads-z-sidebar`	20
`--vads-z-popover`	40
`--vads-z-drawer-backdrop`	50
`--vads-z-drawer`	60
`--vads-z-modal-backdrop`	70
`--vads-z-modal`	80
`--vads-z-toast`	90
`--vads-z-tooltip`	100
`--vads-z-command`	110

Movimento e tempo

Durações, curvas e parâmetros de apresentação.

Token	Valor	Amostra
`--vads-motion-duration-instant`	0ms
`--vads-motion-duration-fast`	120ms
`--vads-motion-duration-normal`	180ms
`--vads-motion-duration-slow`	240ms
`--vads-motion-duration-spinner`	800ms
`--vads-motion-duration-skeleton`	1400ms
`--vads-motion-easing-standard`	cubic-bezier(0.2, 0, 0, 1)
`--vads-motion-easing-enter`	cubic-bezier(0, 0, 0.2, 1)
`--vads-motion-easing-exit`	cubic-bezier(0.4, 0, 1, 1)
`--vads-timing-search-debounce`	250ms
`--vads-timing-loading-hint`	1000ms
`--vads-timing-slow-request`	8000ms
`--vads-timing-toast-default`	6000ms
`--vads-timing-tooltip-delay`	500ms
`--vads-opacity-opaque`	1
`--vads-opacity-scrim-light`	0.36
`--vads-opacity-scrim-dark`	0.64

Aliases de componente

Tokens que os componentes consomem.

Token	Valor	Amostra
`--vads-component-button-radius`	0.5rem
`--vads-component-button-height`	2.5rem
`--vads-component-button-height-compact`	2rem
`--vads-component-button-height-touch`	2.75rem
`--vads-component-button-gap`	0.5rem
`--vads-component-button-padding-inline`	1rem
`--vads-component-button-font-size`	0.875rem
`--vads-component-button-font-weight`	600
`--vads-component-input-radius`	0.5rem
`--vads-component-input-height`	2.5rem
`--vads-component-input-border`	#8D7D72
`--vads-component-input-bg`	#FFFFFF
`--vads-component-input-fg`	#231F20
`--vads-component-input-placeholder`	#655B54
`--vads-component-card-radius`	0.75rem
`--vads-component-card-padding`	1rem
`--vads-component-card-bg`	#FFFFFF
`--vads-component-card-border`	#DDD5CE
`--vads-component-badge-radius`	624.938rem
`--vads-component-badge-height`	1.5rem
`--vads-component-badge-font-size`	0.75rem
`--vads-component-badge-font-weight`	600
`--vads-component-table-row`	3rem
`--vads-component-table-row-compact`	2.5rem
`--vads-component-table-cell-padding`	0.75rem
`--vads-component-table-header-bg`	#F3EFEB
`--vads-component-list-item-height`	6.5rem
`--vads-component-list-item-height-compact`	5.5rem
`--vads-component-list-item-padding`	0.75rem
`--vads-component-list-item-radius`	0.5rem
`--vads-component-bubble-radius`	0.75rem
`--vads-component-bubble-padding`	0.75rem
`--vads-component-bubble-font-size`	0.9375rem
`--vads-component-bubble-line-height`	1.5rem
`--vads-component-composer-radius`	0.75rem
`--vads-component-composer-min-height`	8rem
`--vads-component-composer-max-height`	16rem
`--vads-component-dialog-radius`	1rem
`--vads-component-dialog-padding`	1.5rem
`--vads-component-dialog-shadow`	0 16px 48px rgba(35,31,32,0.18)
`--vads-component-drawer-width`	25rem
`--vads-component-drawer-padding`	1.5rem
`--vads-component-drawer-shadow`	0 16px 48px rgba(35,31,32,0.18)
`--vads-component-popover-radius`	0.75rem
`--vads-component-popover-shadow`	0 8px 24px rgba(35,31,32,0.12)
`--vads-component-tooltip-radius`	0.375rem
`--vads-component-tooltip-bg`	#231F20
`--vads-component-tooltip-fg`	#FFFFFF
`--vads-component-focus-width`	2px
`--vads-component-focus-offset`	0.125rem
`--vads-component-focus-color`	#A84D3A
`--vads-component-avatar-radius`	624.938rem
`--vads-component-avatar-size`	2.5rem
`--vads-component-copilot-bg`	#FFFFFF
`--vads-component-copilot-border`	#8D7D72
`--vads-component-copilot-radius`	0.75rem
`--vads-component-note-bg`	#FCF1D9
`--vads-component-note-fg`	#81510C

Marca

Os arquivos originais do logo, sem redesenho, filtro ou texto em fonte.

Marca completa · sidebar expandida (vads-layout-logo-full)

Claro

Escuro

Símbolo vertical · rail recolhido e celular

Claro

Escuro

Ícones

Pictogramas próprios de traço uniforme, inline, que seguem a cor do texto e o tema.

48 pictogramas · traço único, currentColor

Claro

bag
book
bot
camera
chat
check
checks
chevron
circle
clock
close
connection
copy
edit
exit
filter
flag
globe
grid
headset
image
inbox
info
left
lock
mail
menu
mic
moon
more
palette
paperclip
pause
play
plus
refresh
right
search
send
sliders
smile
sort
sparkle
sun
tag
user
users
warning

Escuro

bag
book
bot
camera
chat
check
checks
chevron
circle
clock
close
connection
copy
edit
exit
filter
flag
globe
grid
headset
image
inbox
info
left
lock
mail
menu
mic
moon
more
palette
paperclip
pause
play
plus
refresh
right
search
send
sliders
smile
sort
sparkle
sun
tag
user
users
warning

Componentes

Os 51 componentes do contrato, por grupo. Cada amostra aparece no tema claro e no escuro.

Fundação

Button

Botão de ação com rótulo, ícone opcional e indicador de progresso; uma ação principal por região.

defaulthoveractivefocusdisabledloading

Variante · primary

Claro

Escuro

Variante · secondary

Claro

Escuro

Variante · ghost

Claro

Escuro

Variante · danger

Claro

Escuro

Variante · link

Claro

Escuro

Tamanhos · compacto, padrão e toque

Claro

Escuro

Ícone inicial e final

Claro

Escuro

Estado · Sobre o ponteiro

Claro

Escuro

Estado · Pressionado

Claro

Escuro

Estado · Foco visível

Claro

Escuro

Estado · Desabilitado

Claro

Escuro

Estado · Carregando

Claro

Escuro

Alternância · aria-pressed

Claro

Escuro

Fundação

IconButton

Botão só com pictograma e nome acessível; a área acionável nunca se reduz ao tamanho do ícone.

defaulthoveractivefocusdisabledloadingselected

Variante · ghost

Claro

Escuro

Variante · secondary

Claro

Escuro

Variante · danger

Claro

Escuro

Variante · alternável

Claro

Escuro

Tamanhos · compacto, padrão e toque

Claro

Escuro

Estado · Sobre o ponteiro

Claro

Escuro

Estado · Pressionado

Claro

Escuro

Estado · Foco visível

Claro

Escuro

Estado · Desabilitado

Claro

Escuro

Estado · Carregando

Claro

Escuro

Estado · Selecionado

Claro

Escuro

Fundação

Badge

Etiqueta curta com cor semântica, ícone opcional e remoção independente. Contrato: Badge / Tag.

defaulthoveractivefocusdisabledselected

Variante · neutral

Claro

Etiqueta de exemplo

Escuro

Etiqueta de exemplo

Variante · success

Claro

Pedido fechado

Escuro

Pedido fechado

Variante · warning

Claro

Aguardando confirmação

Escuro

Aguardando confirmação

Variante · error

Claro

Falha no envio

Escuro

Falha no envio

Variante · info

Claro

IA enviada

Escuro

IA enviada

Variante · brand

Claro

Rascunho

Escuro

Rascunho

Variante · contorno

Claro

NeutraSucessoErro

Escuro

NeutraSucessoErro

Variante · removível

Claro

Tamanho M

Escuro

Tamanho M

Estado · Sobre o ponteiro (tag-filtro)

Claro

Escuro

Estado · Pressionado (tag-filtro)

Claro

Escuro

Estado · Foco visível (tag-filtro)

Claro

Escuro

Estado · Desabilitado

Claro

Escuro

Estado · Selecionado (tag-filtro)

Claro

Escuro

Fundação

Avatar

Foto, iniciais ou fallback de uma pessoa, com presença opcional. Não é clicável por si só.

defaultloadingerrorempty

Variante · iniciais

Claro

Camila Rocha

Escuro

Camila Rocha

Variante · fallback

Claro

Contato sem foto

Escuro

Contato sem foto

Variante · com presença

Claro

Camila RochaOnline

Escuro

Camila RochaOnline

Tamanhos · xs, sm, md e lg

Claro

Escuro

Presença · online, ausente e offline

Claro

Escuro

Estado · Carregando

Claro

Camila Rocha

Escuro

Camila Rocha

Estado · Erro (imagem quebrada cai nas iniciais)

Claro

Camila Rocha

Escuro

Camila Rocha

Estado · Vazio (sem nome e sem foto)

Claro

Contato sem foto

Escuro

Contato sem foto

Fundação

AvatarGroup

Conjunto de avatares de responsáveis com sobreposição controlada e limite +N.

defaulthoveractivefocusloadingerrorempty

Variante · sobreposição

Claro

Equipe: Marina, Lia e Joana.

Escuro

Equipe: Marina, Lia e Joana.

Variante · compacta

Claro

Equipe: Marina, Lia e Joana.

Escuro

Equipe: Marina, Lia e Joana.

Variante · limite +N

Claro

Equipe: Marina, Lia e Joana.

Escuro

Equipe: Marina, Lia e Joana.

Estado · Sobre o ponteiro (+N)

Claro

Escuro

Estado · Pressionado (+N)

Claro

Escuro

Estado · Foco visível (+N)

Claro

Escuro

Estado · Carregando

Claro

Escuro

Estado · Erro

Claro

Não foi possível carregar os participantes.

Escuro

Não foi possível carregar os participantes.

Estado · Vazio

Claro

Sem participantes

Nenhuma pessoa participa desta conversa.

Escuro

Sem participantes

Nenhuma pessoa participa desta conversa.

Fundação

Card

Superfície de conteúdo com título, descrição, corpo e ações; plana por padrão, elevada só com elevação real.

defaulthoveractivefocusdisabledloadingerroremptyselected

Variante · plano

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Variante · elevado

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Variante · selecionável

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Variante · clicável

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Estado · Sobre o ponteiro

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Estado · Pressionado

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Estado · Foco visível

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Estado · Desabilitado

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Estado · Carregando

Claro

Escuro

Estado · Erro

Claro

Vestido Aurora · M · areia

R$ 189,90

Não foi possível atualizar o pedido. Os dados anteriores foram mantidos.

Escuro

Vestido Aurora · M · areia

R$ 189,90

Não foi possível atualizar o pedido. Os dados anteriores foram mantidos.

Estado · Vazio

Claro

Nenhum pedido

Esta cliente ainda não tem pedidos registrados.

Escuro

Nenhum pedido

Esta cliente ainda não tem pedidos registrados.

Estado · Selecionado

Claro

Vestido Aurora · M · areia

R$ 189,90

Escuro

Vestido Aurora · M · areia

R$ 189,90

Navegação

Tabs

Abas locais que alternam painéis sem mudar o contexto da conversa.

defaulthoveractivefocusdisabledloadingselected

Variante · sublinhado

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Variante · segmentadas

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Variante · com contador

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Variante · rolagem horizontal

Claro

Painel de conversa.

Escuro

Painel de conversa.

Ativação manual · Enter ou Espaço

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Navegação · links com aria-current

Claro

Escuro

Estado · Sobre o ponteiro (sublinhado)

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Estado · Pressionado (sublinhado)

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Estado · Foco visível (sublinhado)

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Estado · Desabilitado (sublinhado)

Claro

Conteúdo da aba de exemplo.

Escuro

Conteúdo da aba de exemplo.

Estado · Carregando (sublinhado)

Claro

Conteúdo da aba de exemplo.

Carregando conversa…

Escuro

Conteúdo da aba de exemplo.

Carregando conversa…

Estado · Selecionado (sublinhado)

Claro

Atendimentos anteriores de Marina.

Escuro

Atendimentos anteriores de Marina.

Navegação

Sidebar

Navegação principal retrátil com a marca original, grupos, indicador da página atual e modo rail.

defaulthoveractivefocusdisabledloadingselected

Navegação

Topbar

Barra superior com contexto, busca global, ações gerais e pessoa, que nunca esconde a reconexão.

defaultloadingerror

Variante · desktop

Claro

Escuro

Variante · mobile

Claro

Escuro

Variante · busca

Claro

Escuro

Variante · presença

Claro

Escuro

Variante · estado de conexão

Claro

Escuro

Contexto · breadcrumb

Claro

Escuro

Estado · Carregando (desktop)

Claro

Escuro

Estado · Erro (desktop)

Claro

Escuro

Dados

Table

Tabela semântica com caption, cabeçalhos, seleção, ordenação, paginação e feedback.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · confortável

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Variante · densa

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Variante · ordenável

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Variante · seleção simples

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Variante · seleção múltipla

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Variante · ações em massa

Claro

3 itens selecionados nesta página

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

3 itens selecionados nesta página

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Sobre o ponteiro (confortável)

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Pressionado (confortável)

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Foco visível (confortável)

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Desabilitado (confortável)

Claro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Carregando (confortável)

Claro

Escuro

Estado · Erro (confortável)

Claro

Dados desatualizados

Não foi possível atualizar as macros. A lista abaixo é a última carregada.

Macros de exemplo (Dados desatualizados)
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

Dados desatualizados

Não foi possível atualizar as macros. A lista abaixo é a última carregada.

Macros de exemplo (Dados desatualizados)
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Selecionado (confortável)

Claro

1 item selecionado nesta página

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Escuro

1 item selecionado nesta página

Macros de exemplo
	Status
Confirmar unidade	Ativa	64
Consultar tamanho	Ativa	128
Orientar troca do pedido VD-1048	Pausada	9

Estado · Vazio (confortável)

Claro

Nenhum resultado

Ajuste os filtros para continuar.

Escuro

Nenhum resultado

Ajuste os filtros para continuar.

Sobreposição

Dialog

Janela modal com título, descrição, conteúdo, fechar e rodapé; um modal principal por vez.

A macro "Troca de tamanho" sai da lista da equipe. As conversas já respondidas não mudam.

Estado · Carregando (informação)

Claro

Revisar alterações

Escuro

Revisar alterações

Estado · Erro (informação)

Claro

Edite a macro para ver as mudanças aqui.

Ao vivo · abre o dialog nativo, prende o foco e fecha com Escape

Sobreposição

Drawer

Painel lateral com título, corpo rolável e rodapé fixo, modal ou não conforme o uso.

Disponível para

Estado · Carregando (formulário)

Claro

Editar macro

Escuro

Editar macro

Estado · Erro (formulário)

Claro

Escolha uma macro na lista para editar.

Ao vivo · modal (formulário) com dialog nativo

Ao vivo · contextual, não modal

O painel abre ao lado, sem bloquear a conversa nem prender o foco.

Sobreposição

Lista de ações disparada por botão, com navegação por setas; não substitui o Select de formulário.

defaulthoveractivefocusdisabledloadingselected

Variante · ações

Claro

Escuro

Variante · seções

Claro

Escuro

Variante · item destrutivo

Claro

Escuro

Variante · checkbox

Claro

Escuro

Variante · radio

Claro

Escuro

Estado · Sobre o ponteiro (ações)

Claro

Escuro

Estado · Pressionado (ações)

Claro

Escuro

Estado · Foco visível (ações)

Claro

Escuro

Estado · Desabilitado (ações)

Claro

Escuro

Estado · Carregando (ações)

Claro

Escuro

Estado · Selecionado (ações)

Claro

Escuro

Ao vivo · setas, Home/End, digitação e Escape

Nenhuma ação acionada.

Feedback

Toast

Aviso breve com ícone, mensagem, ação e fechar; erro acionável persiste até ação.

defaulthoverfocuserror

Variante · success

Claro

Rascunho salvo.

Escuro

Rascunho salvo.

Variante · info

Claro

Conversa atribuída a Marina.

Escuro

Conversa atribuída a Marina.

Variante · warning

Claro

Mensagem na fila de envio.Enviando…

Escuro

Mensagem na fila de envio.Enviando…

Variante · error, com ação

Claro

Não foi possível enviar.Seu rascunho foi mantido.

Escuro

Não foi possível enviar.Seu rascunho foi mantido.

Estado · Sobre o ponteiro (pausa o tempo)

Claro

Rascunho salvo.

Escuro

Rascunho salvo.

Estado · Foco visível

Claro

Rascunho salvo.

Escuro

Rascunho salvo.

Estado · Erro

Claro

Não foi possível salvar.O rascunho foi mantido.

Escuro

Não foi possível salvar.O rascunho foi mantido.

Ao vivo · some sozinho, pausa em hover e foco

Feedback

Skeleton

Blocos de carregamento que repetem a geometria real, sem números ou texto fictício.

defaultloading

Variante · linha

Claro

Escuro

Variante · avatar

Claro

Escuro

Variante · lista

Claro

Escuro

Variante · tabela

Claro

Escuro

Variante · painel

Claro

Escuro

Estado · Carregando (sem animação)

Claro

Escuro

Feedback

Spinner

Indicador de operação em andamento com rótulo, para progresso não mensurável.

defaultloading

Variante · inline

Claro

Carregando conteúdo

Escuro

Carregando conteúdo

Variante · área

Claro

Carregando conteúdo

Escuro

Carregando conteúdo

Tamanhos · pequeno e médio

Claro

Pequeno

Médio

Escuro

Pequeno

Médio

Estado · Carregando

Claro

Enviando mensagem

Escuro

Enviando mensagem

Feedback

EmptyState

Estado vazio com ícone discreto, título, explicação e ação, distinguindo primeiro uso, nenhum resultado e sem permissão.

As conversas aparecem aqui assim que um canal estiver conectado.

Feedback

Banner

Aviso em faixa com ícone, título, explicação e ação, que identifica o escopo. Contrato: Banner / Alert.

defaulterror

Variante · info

Claro

Escuro

Variante · success

Claro

Escuro

Variante · warning

Claro

Escuro

Variante · error

Claro

Escuro

Variante · página, dispensável

Claro

Escuro

Estado · Erro (anúncio imediato)

Claro

Escuro

Atendimento

ConversationListItem

Item da inbox com avatar, canal, nome, prévia, horário, contador, status, responsável, fila e SLA.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · não lida

Claro

Escuro

Variante · lida

Claro

Escuro

Variante · selecionada

Claro

Escuro

Variante · sem responsável

Claro

Escuro

Variante · WhatsApp

Claro

Escuro

Variante · Instagram

Claro

Escuro

Variante · Web

Claro

Escuro

Status e SLA informados pelo serviço

Claro

Camila Rocha09:44É esse modelo? Queria o tamanho M.JuremaResolvidaMarina

Escuro

Camila Rocha09:44É esse modelo? Queria o tamanho M.JuremaResolvidaMarina

Seleção em massa · checkbox irmão

Claro

Escuro

Estado · Sobre o ponteiro (não lida)

Claro

Escuro

Estado · Pressionado (não lida)

Claro

Escuro

Estado · Foco visível (não lida)

Claro

Escuro

Estado · Desabilitado (não lida)

Claro

Escuro

Estado · Carregando (não lida)

Claro

Atualizando conversa…

Escuro

Atualizando conversa…

Estado · Erro (não lida)

Claro

Não foi possível atualizar esta conversa. Os dados anteriores foram mantidos.

Escuro

Não foi possível atualizar esta conversa. Os dados anteriores foram mantidos.

Estado · Selecionado (não lida)

Claro

Escuro

Estado · Vazio (sem mensagens)

Claro

Escuro

Ao vivo · abrir conversa e selecionar em massa

0 selecionada(s) para ação em massa

Atendimento

ChatBubble

Balão de mensagem com autoria explícita (cliente, humana, IA, sistema ou nota interna), corpo, anexo, horário e entrega.

defaulthoverfocusloadingerrorselected

Variante · cliente

Claro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Escuro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Variante · vendedora

Claro

MarinaVendedora09:44

Vamos conferir as medidas juntas?

Enviada

Escuro

MarinaVendedora09:44

Vamos conferir as medidas juntas?

Enviada

Variante · IA enviada

Claro

Agente de IAIA enviada09:44

Vou pedir a uma vendedora para confirmar.

Entregue

Escuro

Agente de IAIA enviada09:44

Vou pedir a uma vendedora para confirmar.

Entregue

Variante · sistema

Claro

Marina assumiu a conversa · IA pausada09:46

Escuro

Marina assumiu a conversa · IA pausada09:46

Variante · nota interna

Claro

Nota interna · visível só para a equipeMarinaVendedora09:44

Comprovante recebido. Pagamento ainda não confirmado.

Escuro

Nota interna · visível só para a equipeMarinaVendedora09:44

Comprovante recebido. Pagamento ainda não confirmado.

Variante · imagem

Claro

Camila RochaCliente09:44

É esse modelo? Queria o tamanho M.

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

Camila RochaCliente09:44

É esse modelo? Queria o tamanho M.

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Variante · áudio

Claro

Camila RochaCliente09:44

Te mandei um áudio com as medidas.

0:08 / 0:24

Escuro

Camila RochaCliente09:44

Te mandei um áudio com as medidas.

0:08 / 0:24

Variante · arquivo

Claro

MarinaVendedora09:44

Segue a política de troca do pedido VD-1048.

PDF · 248 KB

Arquivo fictício.

Enviada

Escuro

MarinaVendedora09:44

Segue a política de troca do pedido VD-1048.

PDF · 248 KB

Arquivo fictício.

Enviada

Entrega · só o que o canal informou

Claro

MarinaVendedora09:40

Na fila de envio.

Na fila de envio

MarinaVendedora09:41

Em envio.

Enviando…

MarinaVendedora09:42

Entregue pelo canal.

Entregue

MarinaVendedora09:43

Lida, porque o canal informou.

EditadaLida

MarinaVendedora09:44

Canal sem confirmação de entrega.

Entrega não informada

Escuro

MarinaVendedora09:40

Na fila de envio.

Na fila de envio

MarinaVendedora09:41

Em envio.

Enviando…

MarinaVendedora09:42

Entregue pelo canal.

Entregue

MarinaVendedora09:43

Lida, porque o canal informou.

EditadaLida

MarinaVendedora09:44

Canal sem confirmação de entrega.

Entrega não informada

Conteúdo removido

Claro

Camila RochaCliente09:44

Mensagem removida

Escuro

Camila RochaCliente09:44

Mensagem removida

Estado · Sobre o ponteiro (cliente)

Claro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Escuro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Estado · Foco visível (cliente)

Claro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Escuro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Estado · Carregando (cliente)

Claro

Camila RochaCliente09:44

Carregando mensagem…

Escuro

Camila RochaCliente09:44

Carregando mensagem…

Estado · Erro (vendedora)

Claro

MarinaVendedora09:44

Vamos conferir as medidas juntas?

Não enviada

Não foi possível enviar. O conteúdo foi mantido.

Escuro

MarinaVendedora09:44

Vamos conferir as medidas juntas?

Não enviada

Não foi possível enviar. O conteúdo foi mantido.

Estado · Selecionado (cliente)

Claro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Selecionada

Escuro

Camila RochaCliente09:44

Vamos conferir as medidas juntas?

Selecionada

Ao vivo · falha de envio e nova tentativa

Camila RochaCliente09:44
Oi! Esse vestido tem no M?
MarinaVendedora09:45
Vou conferir o tamanho M e já te retorno.
Não enviada
Não foi possível enviar. O conteúdo foi mantido.

Atendimento

MessageComposer

Área de resposta com visibilidade pública/interna, destinatário e canal, texto, anexos, ferramentas e Enviar.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · resposta pública

Claro

Resposta para a clienteCtrl/⌘ + Enter para enviar

Escuro

Resposta para a clienteCtrl/⌘ + Enter para enviar

Variante · nota interna

Claro

Nota só para a equipeCtrl/⌘ + Enter para enviar

Escuro

Nota só para a equipeCtrl/⌘ + Enter para enviar

Variante · rascunho

Claro

Rascunho mantido ao trocar de modo ou de conversaCtrl/⌘ + Enter para enviar

Escuro

Rascunho mantido ao trocar de modo ou de conversaCtrl/⌘ + Enter para enviar

Variante · anexando

Claro

vestido-aurora-exemplo.jpg

Imagem de peça

Enviando… 40%

Ctrl/⌘ + Enter para enviar

Enviando anexo…

Aguarde o anexo terminar de carregar para enviar.

Escuro

vestido-aurora-exemplo.jpg

Imagem de peça

Enviando… 40%

Ctrl/⌘ + Enter para enviar

Enviando anexo…

Aguarde o anexo terminar de carregar para enviar.

Variante · offline

Claro

Ctrl/⌘ + Enter para enviar

Canal desconectado

WhatsApp desconectado. Reconecte para enviar. Seu rascunho foi mantido.

Escuro

Ctrl/⌘ + Enter para enviar

Canal desconectado

WhatsApp desconectado. Reconecte para enviar. Seu rascunho foi mantido.

Variante · readOnly

Claro

Ctrl/⌘ + Enter para enviar

Você pode ler esta conversa, mas não responder.

Escuro

Ctrl/⌘ + Enter para enviar

Você pode ler esta conversa, mas não responder.

Macro com variável pendente

Claro

Ctrl/⌘ + Enter para enviar

Preencha antes de enviar: {{tamanho}}.

Escuro

Ctrl/⌘ + Enter para enviar

Preencha antes de enviar: {{tamanho}}.

Contador · limite informado por prop

Claro

Ctrl/⌘ + Enter para enviar

O texto passou do limite de 40 caracteres.

Escuro

Ctrl/⌘ + Enter para enviar

O texto passou do limite de 40 caracteres.

Estado · Sobre o ponteiro (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Estado · Pressionado (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Estado · Foco visível (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Estado · Desabilitado (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Estado · Carregando (resposta pública)

Claro

Temos o vestido Aurora no tamanho M, cor areia, por R$ 189,90.

Ctrl/⌘ + Enter para enviar

Escuro

Temos o vestido Aurora no tamanho M, cor areia, por R$ 189,90.

Ctrl/⌘ + Enter para enviar

Estado · Erro (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Não foi possível enviar. Seu rascunho foi mantido.

Escuro

Ctrl/⌘ + Enter para enviar

Não foi possível enviar. Seu rascunho foi mantido.

Estado · Selecionado (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Estado · Vazio (resposta pública)

Claro

Ctrl/⌘ + Enter para enviar

Escuro

Ctrl/⌘ + Enter para enviar

Ao vivo · rascunho por modo, variável pendente, falha e envio com Ctrl/⌘ + Enter

Troque {{tamanho}} por M para liberar o envio. A primeira tentativa falha de propósito.Ctrl/⌘ + Enter para enviar

Preencha antes de enviar: {{tamanho}}.

Atendimento

MacroChip

Atalho de macro que insere conteúdo no rascunho, com marcador de variáveis; nunca envia.

defaulthoveractivefocusdisabledloadingselected

Variante · favorita

Claro

Escuro

Variante · com variáveis

Claro

A macro entra no rascunho; as variáveis são preenchidas antes do envio.

Escuro

A macro entra no rascunho; as variáveis são preenchidas antes do envio.

Variante · indisponível

Claro

Escuro

Variante · com atalho

Claro

Escuro

Estado · Sobre o ponteiro (favorita)

Claro

Escuro

Estado · Pressionado (favorita)

Claro

Escuro

Estado · Foco visível (favorita)

Claro

Escuro

Estado · Desabilitado (favorita)

Claro

Escuro

Estado · Carregando (favorita)

Claro

Escuro

Estado · Selecionado (favorita)

Claro

Escuro

Atendimento

MacroPicker

Seletor de macros com busca, filtros, lista, prévia e Aplicar.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · equipe

Claro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Variante · pessoal

Claro

Macros · pessoais

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · pessoais

Escolha uma macro para ver o texto antes de aplicar.

Variante · favoritas

Claro

Macros · favoritas

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · favoritas

Escolha uma macro para ver o texto antes de aplicar.

Estado · Sobre o ponteiro (equipe)

Claro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Estado · Pressionado (equipe)

Claro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · equipe

Escolha uma macro para ver o texto antes de aplicar.

Estado · Foco visível (equipe)

Claro

Macros · equipe

Enviar chave PixEquipe

O pedido VD-1048 ficou em R$ 189,90. Posso enviar a chave Pix para você concluir?

Escuro

Macros · equipe

Enviar chave PixEquipe

O pedido VD-1048 ficou em R$ 189,90. Posso enviar a chave Pix para você concluir?

Estado · Desabilitado (equipe)

Claro

Macros · equipe

Enviar chave PixEquipe

O pedido VD-1048 ficou em R$ 189,90. Posso enviar a chave Pix para você concluir?

Escuro

Macros · equipe

Enviar chave PixEquipe

O pedido VD-1048 ficou em R$ 189,90. Posso enviar a chave Pix para você concluir?

Estado · Carregando (equipe)

Claro

Macros · equipe

Escuro

Macros · equipe

Estado · Erro (equipe)

Claro

Macros · equipe

Não foi possível atualizar as macros. A lista que você já tinha foi mantida.

Escolha uma macro para ver o texto antes de aplicar.

Escuro

Macros · equipe

Não foi possível atualizar as macros. A lista que você já tinha foi mantida.

Escolha uma macro para ver o texto antes de aplicar.

Estado · Selecionado (equipe)

Claro

Macros · equipe

Consultar tamanhoEquipeFavorita

Oi, {{nome}}! Qual tamanho você costuma usar? Assim eu confiro o que temos na loja.

Variáveis a preencher: nome

Escuro

Macros · equipe

Consultar tamanhoEquipeFavorita

Oi, {{nome}}! Qual tamanho você costuma usar? Assim eu confiro o que temos na loja.

Variáveis a preencher: nome

Estado · Vazio (equipe)

Claro

Macros · equipe

Nenhuma macro encontrada

Ajuste a busca ou o filtro para continuar.

Escuro

Macros · equipe

Nenhuma macro encontrada

Ajuste a busca ou o filtro para continuar.

Ao vivo · popover (desktop) e painel (celular): setas, Enter aplica, Escape preserva o rascunho

Rascunho vazio. Aplicar uma macro preenche o rascunho; nada é enviado.

Atendimento

TicketStatusPill

Status da conversa em pílula com ícone e texto; chevron só quando editável.

defaulthoveractivefocusdisabledloadingerrorselected

Variante · Aberta

Claro

Aberta

Escuro

Aberta

Variante · Aguardando cliente

Claro

Aguardando cliente

Escuro

Aguardando cliente

Variante · Aguardando loja

Claro

Aguardando loja

Escuro

Aguardando loja

Variante · Resolvida

Claro

Resolvida

Escuro

Resolvida

Variante · Spam

Claro

Spam

Escuro

Spam

Estado · Sobre o ponteiro (Aberta)

Claro

Escuro

Estado · Pressionado (Aberta)

Claro

Escuro

Estado · Foco visível (Aberta)

Claro

Escuro

Estado · Desabilitado (Aberta)

Claro

Escuro

Estado · Carregando (Aberta)

Claro

Escuro

Estado · Erro (Aberta)

Claro

Não foi possível alterar o status. A conversa VD-1048 continua como Aberta.

Escuro

Não foi possível alterar o status. A conversa VD-1048 continua como Aberta.

Estado · Selecionado (Aberta)

Claro

Aberta

Escuro

Aberta

Sem transições permitidas · pill informativa

Claro

Resolvida

Escuro

Resolvida

Atendimento

PriorityFlag

Indicador de prioridade com bandeira e rótulo, independente de SLA e sem pulsar.

defaulthoveractivefocusdisabledloadingerrorselected

Variante · Baixa

Claro

Baixa

Escuro

Baixa

Variante · Normal

Claro

Normal

Escuro

Normal

Variante · Alta

Claro

Alta

Escuro

Alta

Variante · Urgente

Claro

Urgente

Escuro

Urgente

Estado · Sobre o ponteiro (Baixa)

Claro

Escuro

Estado · Pressionado (Baixa)

Claro

Escuro

Estado · Foco visível (Baixa)

Claro

Escuro

Estado · Desabilitado (Baixa)

Claro

Escuro

Estado · Carregando (Baixa)

Claro

Escuro

Estado · Erro (Baixa)

Claro

Não foi possível alterar a prioridade. A conversa VD-1048 continua como Baixa.

Escuro

Não foi possível alterar a prioridade. A conversa VD-1048 continua como Baixa.

Estado · Selecionado (Baixa)

Claro

Baixa

Escuro

Baixa

Atendimento

ChannelIcon

Pictograma de canal (chat, câmera, globo) com rótulo acessível; não é logotipo oficial.

default

Variante · WhatsApp

Claro

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Escuro

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Variante · Instagram

Claro

Instagram

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Escuro

Instagram

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Variante · Web

Claro

Web

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Escuro

Web

Pictograma de canal do VADS, não uma cópia do logotipo do provedor.

Variante · sem fundo contextual

Claro

WhatsAppInstagramWeb

Escuro

WhatsAppInstagramWeb

Tamanhos · sm, md e lg

Claro

WhatsAppWhatsAppWhatsApp

WebWebWeb

Escuro

WhatsAppWhatsAppWhatsApp

WebWebWeb

Nome do canal com contexto

Claro

WhatsApp · Camila Rocha

Escuro

WhatsApp · Camila Rocha

Atendimento

QueueBadge

Nome da fila em badge, com ícone opcional; filas são dados, não cores fixas por loja.

defaulthoveractivefocusdisabledselected

Variante · Jurema

Claro

Jurema

Escuro

Jurema

Variante · Harmony Mall

Claro

Harmony Mall

Escuro

Harmony Mall

Variante · Online

Claro

Online

Escuro

Online

Variante · com contagem

Claro

JuremaOnline

Escuro

JuremaOnline

Variante · nome longo truncado

Claro

Atendimento Harmony Mall · trocas e devoluções

Escuro

Atendimento Harmony Mall · trocas e devoluções

Estado · Sobre o ponteiro (Jurema)

Claro

Escuro

Estado · Pressionado (Jurema)

Claro

Escuro

Estado · Foco visível (Jurema)

Claro

Escuro

Estado · Desabilitado (Jurema)

Claro

Escuro

Estado · Selecionado (Jurema)

Claro

Jurema

Escuro

Jurema

Filtro por fila · seleção real

Claro

Escuro

Atendimento

AssigneeSelect

Combobox de responsável com avatar, nome, equipe e presença.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · sem responsável

Claro

Responsável

Escuro

Responsável

Variante · pessoa

Claro

Responsável

Escuro

Responsável

Variante · equipe

Claro

Responsável

Escuro

Responsável

Variante · com presença

Claro

Escuro

Variante · atribuir a mim

Claro

Responsável

Escuro

Responsável

Estado · Sobre o ponteiro (sem responsável)

Claro

Responsável

Escuro

Responsável

Estado · Pressionado (sem responsável)

Claro

Responsável

Escuro

Responsável

Estado · Foco visível (sem responsável)

Claro

Responsável

Escuro

Responsável

Estado · Desabilitado (sem responsável)

Claro

Responsável

Escuro

Responsável

Estado · Carregando (sem responsável)

Claro

Responsável

Carregando pessoas…

Escuro

Responsável

Carregando pessoas…

Estado · Erro (sem responsável)

Claro

Responsável

Não foi possível alterar o responsável. A conversa continua sem responsável.

Escuro

Responsável

Não foi possível alterar o responsável. A conversa continua sem responsável.

Estado · Selecionado (sem responsável)

Claro

Responsável

Escuro

Responsável

Estado · Vazio (sem responsável)

Claro

Responsável

Nenhuma pessoa encontrada.

Escuro

Responsável

Nenhuma pessoa encontrada.

Ao vivo · busca por nome ou equipe, “Atribuir a mim” e confirmação do serviço

Responsável

Conversa VD-1048: sem responsável.

Atendimento

TagInput

Combobox de tags com chips removíveis e ajuda.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · existente

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Variante · criação permitida

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Variante · múltiplas tags

Claro

Tags

Tamanho M
Troca
Primeira compra
Pix

Escuro

Tags

Tamanho M
Troca
Primeira compra
Pix

Estado · Sobre o ponteiro (existente)

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Estado · Pressionado (existente)

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Estado · Foco visível (existente)

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Estado · Desabilitado (existente)

Claro

Tags

Tamanho M

Escuro

Tags

Tamanho M

Estado · Carregando (existente)

Claro

Tags

Tamanho M

Buscando tags…

Escuro

Tags

Tamanho M

Buscando tags…

Estado · Erro (existente)

Claro

Tags

Tamanho M

Não foi possível carregar as tags. O que você digitou foi mantido.

Não foi possível salvar as tags. As que você escolheu foram mantidas.

Escuro

Tags

Tamanho M

Não foi possível carregar as tags. O que você digitou foi mantido.

Não foi possível salvar as tags. As que você escolheu foram mantidas.

Estado · Selecionado (existente)

Claro

Tags

Tamanho M
Troca

Escuro

Tags

Tamanho M
Troca

Estado · Vazio (existente)

Claro

Tags

Escuro

Tags

Ao vivo · adicionar, criar, recusar duplicata e limite de 5 tags

Tags da conversa VD-1048

Tamanho M
Pix

Nenhuma tag nova criada.

Atendimento

CopilotSuggestionCard

Sugestão interna do Copilot com texto, motivo, fontes e data, e as ações Usar, Editar e Descartar.

defaulthoveractivefocusdisabledloadingerrorselectedempty

Variante · sugestão

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Variante · gerando

Claro

Sugestão do Copilot

Escuro

Sugestão do Copilot

Variante · com ressalva

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Variante · fonte indisponível

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fonte indisponívelNão encontrei uma fonte atualizada. Revise antes de responder.

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fonte indisponívelNão encontrei uma fonte atualizada. Revise antes de responder.

Estoque e prazo não consultados.

Variante · descartada

Claro

Sugestão do Copilot

Sugestão descartada

Nada foi enviado. Continue o atendimento manualmente.

Escuro

Sugestão do Copilot

Sugestão descartada

Nada foi enviado. Continue o atendimento manualmente.

Estado · Sobre o ponteiro (sugestão)

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Estado · Pressionado (sugestão)

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Estado · Foco visível (sugestão)

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Estado · Desabilitado (sugestão)

Claro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Estado · Carregando (sugestão)

Claro

Sugestão do Copilot

Escuro

Sugestão do Copilot

Estado · Erro (sugestão)

Claro

Escuro

Estado · Selecionado (sugestão)

Claro

Sugestão do CopilotRascunhoEm uso no rascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Escuro

Sugestão do CopilotRascunhoEm uso no rascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Estado · Vazio (sugestão)

Claro

Sugestão do Copilot

Nenhuma sugestão para esta conversa

Continue o atendimento manualmente.

Escuro

Sugestão do Copilot

Nenhuma sugestão para esta conversa

Continue o atendimento manualmente.

Ao vivo · Usar insere no rascunho, Descartar remove a sugestão

Sugestão do CopilotRascunho

Você prefere retirar na Jurema ou receber em casa?

Motivo: confirmar a preferência de entrega.

Fontes consultadas

Roteiro de atendimento fictícioAtualizada em 29/09/2026

Estoque e prazo não consultados.

Usar só insere o rascunho. O envio continua sendo seu.Ctrl/⌘ + Enter para enviar

Atendimento

EscalationBanner

Faixa de passagem IA → humana com motivo, resumo interno, fila, responsável e Assumir.

defaultloadingerror

Variante · solicitada

Claro

Escuro

Variante · aguardando humana

Claro

Escuro

Variante · assumindo

Claro

Escuro

Variante · assumida

Claro

Escuro

Variante · falhou

Claro

Escuro

Estado · Carregando (solicitada)

Claro

Escuro

Estado · Erro (solicitada)

Claro

Escuro

Ao vivo · assumir só confirma depois da resposta do serviço

Atendimento

ContactCard

Cartão da cliente com nome, identificadores permitidos, canal, pedidos e notas, com dados sensíveis mascarados.

defaultloadingerrorempty

Variante · identificado

Claro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Pedidos

Pedido VD-1048Aguardando pagamento
Vestido Aurora · M · areia
R$ 189,90
29/09/2026, 09:41

Notas

Prefere retirar na loja. Nota fictícia.

Escuro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Pedidos

Pedido VD-1048Aguardando pagamento
Vestido Aurora · M · areia
R$ 189,90
29/09/2026, 09:41

Notas

Prefere retirar na loja. Nota fictícia.

Variante · visitante

Claro

Visitante

Contato fictício · sem dados pessoais reais.

Escuro

Visitante

Contato fictício · sem dados pessoais reais.

Variante · dados parciais

Claro

Camila Rocha

Telefone não informado.

Telefone: Não informado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE

Escuro

Camila Rocha

Telefone não informado.

Telefone: Não informado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE

Variante · acesso restrito

Claro

Camila Rocha

Dados pessoais com acesso restrito.

Pedidos

Pedidos com acesso restrito.

Escuro

Camila Rocha

Dados pessoais com acesso restrito.

Pedidos

Pedidos com acesso restrito.

Aparência · sem moldura, resumo centralizado

Claro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Notas

Prefere retirar na loja. Nota fictícia.

Escuro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Notas

Prefere retirar na loja. Nota fictícia.

Pedidos · falha localizada, contato mantido

Claro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Pedidos

Não foi possível consultar pedidos. Os dados do contato foram mantidos.

Notas

Prefere retirar na loja. Nota fictícia.

Escuro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Pedidos

Não foi possível consultar pedidos. Os dados do contato foram mantidos.

Notas

Prefere retirar na loja. Nota fictícia.

Pedidos · carregando e sem pedidos

Claro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Pedidos

Estado · Erro

Claro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Notas

Prefere retirar na loja. Nota fictícia.

Não foi possível atualizar o contato. Os dados anteriores foram mantidos.

Escuro

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Notas

Prefere retirar na loja. Nota fictícia.

Não foi possível atualizar o contato. Os dados anteriores foram mantidos.

Estado · Vazio

Claro

Nenhum contato vinculado

Esta conversa ainda não tem um contato identificado.

Escuro

Nenhum contato vinculado

Esta conversa ainda não tem um contato identificado.

Ao vivo · revelar e ocultar dado sensível (autorização simulada)

Camila Rocha

Contato fictício · sem dados pessoais reais.

Telefone: (85) •••••-0000, dado mascarado
E-mail: c•••••@exemplo.com, dado mascarado
Cidade: Fortaleza, CE
Unidade: Loja Centro

Pedidos

Pedido VD-1048Aguardando pagamento
Vestido Aurora · M · areia
R$ 189,90
29/09/2026, 09:41

Notas

Prefere retirar na loja. Nota fictícia.

Atendimento

ContactTimeline

Linha do tempo da cliente com ícone, título, ator, horário e detalhes, mais recentes primeiro.

defaultloadingerrorempty

Variante · mensagens

Claro

Mensagem: Nova conversa no WhatsApp
Dúvida sobre tamanho.
Hoje, 09:41Camila Rocha
Mensagem: Conversa resolvida no Instagram
Troca de cor combinada.
18/09/2026, 16:20Marina

Escuro

Mensagem: Nova conversa no WhatsApp
Dúvida sobre tamanho.
Hoje, 09:41Camila Rocha
Mensagem: Conversa resolvida no Instagram
Troca de cor combinada.
18/09/2026, 16:20Marina

Variante · pedidos

Claro

Pedido: Pedido VD-1048 criado
Vestido Aurora · M · areia · R$ 189,90
Hoje, 09:52Marina
Pedido: Pedido anterior fechado
VD-0981 · registro fictício independente da conversa atual.
18/09/2026Sistema

Escuro

Pedido: Pedido VD-1048 criado
Vestido Aurora · M · areia · R$ 189,90
Hoje, 09:52Marina
Pedido: Pedido anterior fechado
VD-0981 · registro fictício independente da conversa atual.
18/09/2026Sistema

Variante · atribuições

Claro

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Escuro

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Variante · notas

Claro

Nota interna: Nota interna adicionada
Visível só para a equipe.
Hoje, 09:47Marina
Cliente prefere retirar na loja. Nota fictícia.
29/09/2026, 09:47 · horário de Fortaleza

Escuro

Nota interna: Nota interna adicionada
Visível só para a equipe.
Hoje, 09:47Marina
Cliente prefere retirar na loja. Nota fictícia.
29/09/2026, 09:47 · horário de Fortaleza

Variante · eventos de IA

Claro

Evento de IA: Conversa aguardando uma vendedora
Pedido de passagem para humana, com resumo interno.
Hoje, 09:42Agente de IA
Evento de IA: Resposta enviada pelo agente de IA
Tabela de medidas do Vestido Aurora.
Hoje, 09:41Agente de IA

Escuro

Evento de IA: Conversa aguardando uma vendedora
Pedido de passagem para humana, com resumo interno.
Hoje, 09:42Agente de IA
Evento de IA: Resposta enviada pelo agente de IA
Tabela de medidas do Vestido Aurora.
Hoje, 09:41Agente de IA

Carregar mais · em repouso e em andamento

Claro

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Escuro

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Atribuição: Conversa enviada para a fila Vendas
Hoje, 09:42Sistema

Estado · Carregando

Claro

Escuro

Estado · Erro

Claro

Mensagem: Nova conversa no WhatsApp
Dúvida sobre tamanho.
Hoje, 09:41Camila Rocha
Mensagem: Conversa resolvida no Instagram
Troca de cor combinada.
18/09/2026, 16:20Marina

Não foi possível atualizar o histórico. Os eventos anteriores foram mantidos.

Escuro

Mensagem: Nova conversa no WhatsApp
Dúvida sobre tamanho.
Hoje, 09:41Camila Rocha
Mensagem: Conversa resolvida no Instagram
Troca de cor combinada.
18/09/2026, 16:20Marina

Não foi possível atualizar o histórico. Os eventos anteriores foram mantidos.

Estado · Vazio

Claro

Nenhum evento no histórico

Os eventos desta cliente aparecem aqui.

Escuro

Nenhum evento no histórico

Os eventos desta cliente aparecem aqui.

Ao vivo · ver detalhes e carregar eventos anteriores

Pedido: Pedido VD-1048 criado
Vestido Aurora · M · areia · R$ 189,90
Hoje, 09:52Marina
Nota interna: Nota interna adicionada
Visível só para a equipe.
Hoje, 09:47Marina
Atribuição: Marina assumiu a conversa
Agente de IA pausado.
Hoje, 09:43Marina
Evento de IA: Conversa aguardando uma vendedora
Pedido de passagem para humana, com resumo interno.
Hoje, 09:42Agente de IA
Mensagem: Nova conversa no WhatsApp
Dúvida sobre tamanho.
Hoje, 09:41Camila Rocha

Atendimento

PresenceMenu

Menu de presença operacional da pessoa (online, ausente, offline), distinto da conexão de rede.

defaulthoveractivefocusdisabledloadingerrorselected

Variante · Online

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Variante · Ausente

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Variante · Offline

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Variante · sincronizando

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Variante · só avatar (barra superior)

Claro

Escuro

Estado · Sobre o ponteiro (Online)

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Estado · Pressionado (Online)

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Estado · Foco visível (Online)

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Estado · Desabilitado (Online)

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Estado · Carregando (Online)

Claro

Escuro

Estado · Erro (Online)

Claro

Escuro

Estado · Selecionado (Online)

Claro

Presença não representa conexão do canal.

Escuro

Presença não representa conexão do canal.

Aviso de canal · presença Online com WhatsApp desconectado

Claro

Escuro

Ao vivo · troca confirmada pelo serviço, falha e canal desconectado

Auxiliar

AttachmentCard

Cartão de anexo com nome, tipo, tamanho, prévia segura, progresso e ações.

defaulthoverfocusloadingerrorselected

Variante · imagem de peça

Claro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Variante · comprovante

Claro

comprovante-exemplo.png

Recebido · confirmação pendente

Comprovante recebido · pagamento de R$ 189,90 ainda não confirmado.

Pagamento não confirmado

Escuro

comprovante-exemplo.png

Recebido · confirmação pendente

Comprovante recebido · pagamento de R$ 189,90 ainda não confirmado.

Pagamento não confirmado

Variante · documento

Claro

PDF · 248 KB

Arquivo fictício.

Escuro

PDF · 248 KB

Arquivo fictício.

Variante · áudio

Claro

audio-camila-exemplo.ogg

Áudio · 0:24

Arquivo fictício.

Escuro

audio-camila-exemplo.ogg

Áudio · 0:24

Arquivo fictício.

Variante · upload

Claro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Enviando… 40%

Escuro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Enviando… 40%

Variante · download

Claro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Variante · restrito

Claro

comprovante-exemplo.png

Arquivo com acesso restrito.

Escuro

comprovante-exemplo.png

Arquivo com acesso restrito.

Estado · Sobre o ponteiro (imagem de peça)

Claro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Estado · Foco visível (imagem de peça)

Claro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Estado · Carregando (imagem de peça)

Claro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Enviando…

Escuro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Enviando…

Estado · Erro (imagem de peça)

Claro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Não foi possível enviar o arquivo. A mensagem foi mantida.

Escuro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Não foi possível enviar o arquivo. A mensagem foi mantida.

Estado · Selecionado (imagem de peça)

Claro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Escuro

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

vestido-aurora-exemplo.jpg

Imagem de peça · amostra visual

Arquivo fictício. Sem fotografia real.

Auxiliar

AudioPlayer

Player de áudio com play/pause, duração, progresso, velocidade e transcrição; nunca autoplay.

defaulthoveractivefocusdisabledloadingerror

Variante · parado

Claro

0:00 / 0:24