Toast

O componente Toast nos permite notificar usuários em um tom informacional, descrevendo que algo aconteceu ou está acontecendo, sem interromper a navegação.

import React from "react";
import { Toast } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Toast id="my-toast" text="Primary" type="primary" autoClose={false} />
);

export default Example;

Ver no Figma

Anatomia do componente

O componente é composto por um ícone e texto, dentro de uma caixa com background e borda estilizados de acordo com os estados possíveis.

Guidelines

Utilizamos esse componente para mostrar notificações informativas, curtas e temporárias, relacionadas a ações que acabaram de acontecer ou estão acontecendo, quando não existe necessidade de interromper a navegação ou requerer interações em outras telas.

Variantes

Primary - Usada em contextos neutros, não associado a uma ação positiva ou negativa;
Success - Usada em contextos positivos, associado ações executadas com sucesso;
Danger - Usada em contextos negativos, associado a erros de processamento ou preenchimento;
Progress - Usada em contextos neutros, associada a uma ação que ainda está em processamento e não tem status de sucesso ou erro definido.

Conteúdo

O texto desse componente é limitado a no máximo 30 caracteres e sua mensagem deve ser breve e concisa, informando o usuário sobre algo que acabou de acontecer, logo após a ação ser executada ou enquanto é processada.

A mensagem deve ser escrita no infinitivo e com a seguinte estrutura: A ação que acabamos de fazer (exemplo: criação de um produto) O resultado da ação (exemplo: com sucesso / com erro)

Tempo de apresentação

O tempo de apresentação pode ser personalizado de acordo com o contexto em que o toast é aplicado, sempre devemos levar em conta a quantidade de caracteres seguindo as sugestões abaixo.

4 segundos - Para mensagem com até 10 caracteres;
8 segundos - Para mensagem com mais de 10 caracteres;
16 segundos - Para mensagem com mais de 20 caracteres;
Personalizado - Uso restrito ao toast progress.

Recomendação de uso

Informar sobre campos não preenchidos em um formulário
Informar sobre erros de preenchimento em formulários
Informar que existe um processamento ou upload ocorrendo
Informar que informações foram salvas
Informar que algum erro sistêmico ocorreu

Componentes relacionados

Alert - Pode ser usado para notificar o usuário de forma atemporal sobre um evento importante que requer sua ação.
Modal - Pode ser usado para notificar o usuário de forma intrusiva, dando a possibilidade de tomar uma decisão com base em algo que acabou de acontecer.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/toast

Configuração e uso básico para facilitar e acelerar o uso do componente toast fornecemos um componente de suporte chamado de ToastProvider.

Este componente deve ser colocado no topo mais alto da sua aplicação React para que o hook useToast esteja disponível em todos os níveis da aplicação de maneira simples e rápida.

// App.tsx
import React from "react";
import Home from "home";
import "@nimbus-ds/styles/dist/index.css";

const App: React.FC = () => {
  const { addToast } = useToast();
    return (
      <ToastProvider>
        <Home />
      </ToastProvider>;
    );
};

// Home.tsx
import React from "react";
import { ToastProvider } from "@nimbus-ds/toast";

const Home: React.FC = () => {
  const { addToast } = useToast();
    return (
      <button
        onClick={() => {
          addToast({
            type: "primary",
            text: "Toast",
            duration: 4000,
          });
        }}
      >
        Mostrar toast
      </button>
    );
};

Props

Additional props are passed to the <Toast> element. See div docs for a list of props accepted by the <Toast> element.