Toast

El componente Toast nos permite avisar a los usuarios en tono informativo, describiendo que algo ha pasado o está pasando, sin interrumpir la navegación.

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

Anatomía del componente

El componente consta de un icono y texto, dentro de un cuadro con fondo y borde estilizado según los posibles estados.

Guidelines

Utilizamos este componente para mostrar notificaciones informativas, breves y temporales relacionadas con acciones que se acaban de realizar o se están realizando, cuando no es necesario interrumpir la navegación o requerir interacciones en otras pantallas.

Variantes

Primary - Usado en contextos neutrales, no asociado con una acción positiva o negativa;
Success - Utilizado en contextos positivos, asociado a acciones realizadas con éxito;
Danger - Usado en contextos negativos, asociado a errores de procesamiento o llenado;
Progress - se utiliza en contextos neutrales, asociado con una acción que aún está en proceso y no tiene un estado definido de éxito o error.

Conteúdo

El texto de este componente está limitado a un máximo de 30 caracteres y su mensaje debe ser breve y conciso, informando al usuario sobre algo que acaba de suceder, justo después de que se realizó la acción o mientras se procesaba.

El mensaje debe estar escrito en infinitivo y con la siguiente estructura: La acción que acabamos de realizar (ejemplo: crear un producto) El resultado de la acción (ejemplo: con éxito/con error)

Tempo de apresentação

El tiempo de presentación se puede personalizar según el contexto en el que se aplique el brindis, siempre hay que tener en cuenta la cantidad de caracteres siguiendo las sugerencias a continuación.

4 segundos - Para mensajes de hasta 10 caracteres;
8 segundos - Para mensaje con más de 10 caracteres;
16 segundos - Para mensajes con más de 20 caracteres;
Personalizado - Uso restringido al progreso del brindis

Recomendaciones de uso

Informar sobre campos sin llenar en un formulario
Informar sobre errores de llenado en formularios
Informar que se está realizando un procesamiento o carga
Informar qué información se guardó
Informar que se ha producido un error sistémico

Componentes relacionados

Alerta: se puede utilizar para notificar al usuario de manera oportuna sobre un evento importante que requiere su acción.
Modal: se puede usar para notificar al usuario de manera intrusiva, lo que le da la posibilidad de tomar una decisión basada en algo que acaba de suceder.

Implementación

Instale el componente via terminal.

npm install @nimbus-ds/toast

Configuración y Uso Básico Para facilitar y agilizar el uso del componente brindis proporcionamos un componente de soporte llamado ToastProvider.

Este componente debe colocarse en la parte superior de su aplicación React para que el enlace useToast esté disponible en todos los niveles de la aplicación de una manera simple y 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,
          });
        }}
      >
        Toast
      </button>
    );
};

Props

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