Pular para o conteúdo principal

Toast

Base​

Personalização​

Sem mensagem​

Use quando for necessário apenas um título, com poucas palavras.

Mensagem personalizada​

Use o componente Toast.Text para adicionar links ou botões.

Botão​

Ícone personalizado​

A propriedade icon permite que você insira no Toast os ícones disponíveis. Caso você precise de um ícone novo, faça solicitação ao time do Tangram.

Tipos​

Cada "tipo" de Toast já vem com um ícone padrão relacionado a cada tipo disponível. Para saber qual tipo de Toast usar em cada cenário acesse a nossa aba de uso do componente.

Primary​

Danger​

Warning​

Success​

Help​

Delay​

O Toast não é removido da tela automaticamente, mas é possível adicionar um tempo de delay para que ele saia da tela. Esse tempo deve ser adicionado em milisegundos.

Sem a opção de fechar​

Não permite que o Toast seja removido da tela.

ToastProvider​

O componente Toast possui um provider que é utilizado pela HOC withToast e pelo hook useToast. Esse provider pode ser instanciado apenas uma vez no mais alto nível da aplicação e nos testes.

Atenção

Evite instanciar mais de um ToastProvider em sua aplicação.

Adicionar Múltiplos Toasts​

useToast​

Use o hook useToast para adicionar mais de um Toast ou limpar todos os adicionados.

Para mais detalhes sobre os parâmetros e retornos consulte a API do useToast.

Com withToast​

Outra forma de adicionar mais de um Toast e removê-los de uma vez só é usando o componente de ordem superior (HOC, do inglês High Order Component) withToast. Essa função recebe um componente que repassa a função addToast e todos os atributos da função useToast.

import React from 'react';
import {
  withToast,
  ButtonGroup,
  Button
} from '@resultadosdigitais/tangram-components';
const MyDesiredToast = ({ addToast, clean }) => {
  const [count, setCount] = React.useState(0);

  const handleAddToast = () => {
    const newCount = count + 1;

    addToast({
      title: `Toast title ${newCount}`,
      message: `Toast message ${newCount}`
    });
    setCount(newCount);
  };

  return (
    <ButtonGroup>
      <Button kind={Button.kinds.secondary} onClick={handleAddToast}>
        Add Toast
      </Button>

      <Button kind={Button.kinds.tertiary} onClick={clean}>
        Clear Toasts
      </Button>
    </ButtonGroup>
  );
};

const ExampleHOC = withToast(MyDesiredToast);

export default ExampleHOC;

Feedback​

Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.