componentes
toast
Toast é um elemento utilizado para apresentar mensagens curtas temporáriamente.
índice
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
id | Toasts dialog identifier | false | undefined | string |
toasts | List of toasts. You can check the type structure here | true | undefined | IToastType[] |
*valores gerados automaticamente.
uso
Toasts são utilizados para apresentar uma mensagem curta temporáriamente, como feedback de um botão de copiar dados ou erro em chamadas para APIs.
estilos
| estilo | utilização |
|---|---|
| info | Para apresentar mensagem curta comum. |
| success | Para indicar sucesso ao finalizar a execução de alguma ação. |
| alert | Para indicar falha ao finalizar a execução de alguma ação. |
guia de conteúdo
- Preferencialmente utilizar textos curtos de até duas linhas.
- Analise se é necessário um Toast ou um Modal para seu uso.
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
conteúdo relacionado
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| variation | variation |
| position | size |
| icon | icon |
| showToast | hide |
| onHide | onClose |
| ❌ | id |
| ❌ | message |
| ❌ | link |
| ❌ | hideInfoIcon |
| ❌ | href |
| ❌ | hide |
Variações Existentes
| United | Olist Design System |
|---|---|
| primary | info |
| danger | alert |
| alternate | success |