Popover Next
Uso
O Popover é um elemento flutuante utilizado para apresentar informações adicionais sobre um elemento da interface.
Ele pode ser exibido ao clicar em um elemento da tela ou automaticamente após o carregamento da página.
Após aberto, o Popover pode ser fechado ao clicar fora dele ou por meio de interações internas, como ações disponíveis no próprio conteúdo ou no botão "Fechar".
Somente um componente Popover pode estar ativo por vez em uma página.
Popover transacional
É utilizado para trazer informações adicionais a um determinado elemento da tela. Deve conter ao menos uma descrição curta e pode incluir um título breve.
O conteúdo do Popover também pode apresentar uma ilustração, um link na descrição e até dois botões de ações.
Utilize para apresentar informações e oferecer ações adicionais relacionadas a determinado elemento ou assunto
Pode, ainda, permanecer aberto até que o usuário realize alguma interação. Nestes casos, recomenda-se exibir o botão "Fechar".
Popover de destaque
Utilizado para introduzir novos elementos ou funcionalidades em uma tela ou fluxo (onboarding).
Pode conter um título curto, um texto descritivo com link e até dois botões, que podem ser utilizados para navegação entre Popovers em onboardings guiados.
Utilize para apresentar novos elementos ou funcionalidades em uma página.
Para mais informações sobre a criação de Onboardings, acesse nossa documentação.
Deve permanecer aberto durante a interação e ser fechado apenas por meio do botão "Fechar".
Textos
Título
- Conciso e claro: Deve ser breve e comunicar de forma clara o propósito ou a ação associada ao
Popover, evite termos técnicos - Consistente: Utilize uma linguagem alinhada ao tom e à voz dos produtos da marca, garantindo uma experiência mais familiar para o usuário
- Destaque a informação principal: Destaque palavras-chave ou detalhes relevantes da informação, isso ajuda na identificação do contexto ou finalidade do
Popover
Descrição
- Sucinta e objetiva: Apresente as informações adicionais ou instruções relevantes de maneira objetiva, evite textos longos ou que exijam alta carga cognitiva
- Linguagem clara e acessível: O conteúdo deve ser fácil de compreender por qualquer pessoa, independente do nível de familiaridade com o produto, Evite termos técnicos ou formais
- Relevância: Priorize as informações mais importantes para quem está lendo, evite excessos ou detalhes dispensáveis. O que a pessoa realmente precisa saber?
- Formato adequado: Utilize negrito, itálico ou cores para destacar informações importantes, isso ajuda a melhorar a leitura e escaneabilidade do texto
Ações
- Relacione o texto da ação com o verbo do título, para criar uma dupla confirmação de forma orgânica
- Ofereça sempre a opção de "cancelar" a ação
- Caso precise relacionar o
Popovercom uma informação externa, use um link na descrição
Boas práticas
Feedback
To report a problem or suggest changes, use our improvements form or, if you prefer, open an issue on our Github repository.