Toast

2.4.0

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;

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

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.

  • 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.

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)

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.
  • 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
  • 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.

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>
    );
};

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

Toast

NameTypeDefaultDescription

id*

string

Unique toast ID used when hiding or removing a toast.

text*

string

The text that should appear in the toast message.

type

'danger'
'primary'
'progress'
'success'

'primary'

Change the visual style of the toast.

duration

'16000'
'4000'
'8000'

'4000'

The time in milliseconds that the toast message should persist.

autoClose

boolean

'true'

Tells you whether or not Toast should close automatically.

position

number

0

Tells the toast position when we are using multiple toasts.

Toast.Provider

NameTypeDefaultDescription

children*

React.ReactNode