Overlay

Coach Mark

Destaque contextual para onboarding e apresentação de novidades.

BetaOverlayv1.0

Overview

Demonstração real e interativa de Coach Mark nas larguras desktop, tablet e mobile.

Coach Mark

Filtros inteligentes

Agora você pode salvar combinações de filtros e reutilizá-las em qualquer busca.

1 de 3

Altere as propriedades e veja o componente atualizar em tempo real.

Filtros inteligentes

Agora você pode salvar combinações de filtros e reutilizá-las em qualquer busca.

1 de 3

Superfície

Densidade

Largura

Ajuste o contexto de renderização para validar o componente em diferentes superfícies e larguras.

Todos os estados exibidos simultaneamente para facilitar a comparação.

Coach Mark

Default

Coach Mark

Hover

Feedback imediato

Coach Mark

Focus

Anel de foco visível

Coach Mark

Disabled

opacity 60%

Critérios de escolha e boas práticas.

Quando o contexto exige destaque contextual para onboarding e apresentação de novidades.
Em telas da categoria Overlay que precisam de consistência com o restante da plataforma.
Quando a interação precisa ser previsível e reutilizável entre produtos.

Aplique Coach Mark conforme os tokens de espaçamento, cor e tipografia definidos no Design System.

Don't

Não crie variações locais de Coach Mark com cores, tamanhos ou comportamentos fora dos tokens.

Requisitos obrigatórios para conformidade WCAG 2.1 AA.

Contraste mínimo de 4.5:1 entre texto e fundo (WCAG 2.1 AA).
Todos os elementos interativos são alcançáveis via Tab e acionáveis por Enter/Espaço.
Foco sempre visível com anel de 2px usando --color-focus e offset de 2px.
Área mínima de toque de 44x44px em dispositivos móveis.
Estados disabled recebem aria-disabled e são removidos da ordem de tabulação quando aplicável.

Valores de referência para implementação, sempre baseados em tokens.