Toast

The toast component is a lightweight notification element that appears temporarily to provide feedback or updates to the user. It is commonly used to communicate non-critical information, such as success messages, warning alerts, or brief updates.

Toasts queue

A component to be rendered at the top level of the application.

Props

Name	Type	Description	Default
duration	`number`	Duration in milliseconds before a toast automatically hides itself. The range goes from 3000ms to 5000ms, any other value will not be taken into consideration.	`3000`
children	`ReactNode`	Tree of components from which the `useToast` hook can be triggered.	-

useToast

A hook to queue toasts from any part of your application contained inside the Toast queue. It returns an object with five methods, each explained below:

Method	Type	Description
default	`(toast: Default) => void`	Shows a toast with no implicit semantic meaning.
info	`(toast: Semantic) => void`	Shows a toast with an information semantic.
loading	`(toast: Loading) => (() => void)`	Shows a loading status toast. Visually and semantically, it is the same as an information toast, but with the difference that it never disappears from the screen. Its removal will always depend on the user, thanks to the function returned by this method.
success	`(toast: Semantic) => void`	Shows a toast with a success semantic.
warning	`(toast: Semantic) => void`	Shows a toast with a warning semantic.

Each method has a different argument type, which are detailed in the following sections.

Default

Name	Type	Description	Default
action	`{ icon: string \| (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }`	Tertiary button which performs a custom action, specified by the user.	-
icon	`string \| (React.ReactNode & React.SVGProps <SVGSVGElement>)`	Material Symbol name or SVG element as the icon that will be placed next to the panel label. When using Material Symbols, replace spaces with underscores. By default they are outlined if you want it to be filled prefix the symbol name with `"filled_"`.	-
Required message	`string`	Message to be displayed as a toast.	-

Loading

Name	Type	Description	Default
action	`{ icon: string \| (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }`	Tertiary button which performs a custom action, specified by the user.	-
Required message	`string`	Message to be displayed as a toast.	-

Semantic

Name	Type	Description	Default
action	`{ icon: string \| (React.ReactNode & React.SVGProps<SVGSVGElement>); label: string; onClick: () => void; }`	Tertiary button which performs a custom action, specified by the user.	-
hideSemanticIcon	`boolean`	Flag that allows to hide the semantic icon of the toast.	`false`
Required message	`string`	Message to be displayed as a toast.	-

Examples

Basic usage

() => {
  const toast = useToast();

  return (
    <DxcInset space="2rem">
      <DxcButton 
        label="Show toast" 
        onClick={() => {
          toast.default({ message: "This is a basic message." });
        }} 
      />
    </DxcInset>
  );
}

Semantic toasts

() => {
  const toast = useToast();

  const action = { label: "Action", onClick: () => {} };

  return (
    <DxcInset space="2rem">
      <DxcFlex gap="1rem">
        <DxcButton 
          label="Show information toast"
          semantic="info"
          onClick={() => {
            toast.info({ message: "This is a information message.", action });
          }}
        />
        <DxcButton 
          label="Show success toast" 
          semantic="success"
          onClick={() => {
            toast.success({ message: "This is a success message.", action });
          }} 
        />
        <DxcButton 
          label="Show warning toast"
          semantic="warning"
          onClick={() => {
            toast.warning({ message: "This is a warning message.", action });
          }}
        />
      </DxcFlex>
    </DxcInset>
  );
}

Loading toast

A loading toast is a toast that will never disappear from the screen. Its removal will always depend on the user, thanks to the function returned by the loading method. This allows users to have full control over the status of the process.

() => {
  const toast = useToast();

  const loadProcess = () => {
    const loadingToast = toast.loading({ message: "Loading process..." });

    setTimeout(() => {
      loadingToast();
      toast.success({ message: "Process finished successfully." });
    }, 6000);
  };

  return (
    <DxcInset space="2rem">
      <DxcButton 
        label="Load process" 
        onClick={loadProcess} 
      />
    </DxcInset>
  );
}