Toast

A toast displays a non-disruptive message to provide quick feedback and confirmation after the user takes an action.

Basic

Toast component will display a notification message at a corners of the viewport by setting the open prop to true.

Source Code

import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function Basic() {
  const [showToast, setShowToast] = useState(false);
  return (
    <>
      <div className="flex gap-4">
        <Button onClick={() => setShowToast((prev) => !prev)}>Toggle A Toast</Button>
        <Button onClick={() => setShowToast(true)}>Show Toast</Button>
        <Button onClick={() => setShowToast(false)}>Hide Toast</Button>
      </div>

Colors

Toast component supports 5 colors: red, green, blue, orange, and neutral by setting the color prop.
Default color is blue.

Source Code

import {
  Button,
  FeedbackMessageColor,
  Toast,
  ToastProps,
} from '@ocean-network-express/magenta-ui/react';
import React from 'react';

const upperFirst = (str: string) => \`\${str[0].toUpperCase()}\${str.slice(1)}\`;
const ColorOptions = Object.values(FeedbackMessageColor).map((color) => ({
  label: upperFirst(color),
  value: color,

Sizes

Toast component supports 4 sizes: sm, md, lg, and responsive by setting the size prop.
Default size is lg.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Button, Toast, ToastProps } from '@ocean-network-express/magenta-ui/react';
import { useRef, useState } from 'react';

import { SizeOptions } from '../Alert/helpers';

export function Sizes() {
  const oldSize = useRef<ToastProps['size']>();
  const [size, setSize] = useState<ToastProps['size']>();

  const handleSizeChange = (option: ToastProps['size']) => () => {
    if (size === option) {

Positions

Toast component supports 6 positions: top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center by setting the position prop.
Default position is top-right.

Source Code

import { Button, FeedbackMessagePosition, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

const upperFirst = (str: string) => \`\${str[0].toUpperCase()}\${str.slice(1)}\`;
const PositionOptions = Object.values(FeedbackMessagePosition).map((position) => ({
  label: position.split('-').map(upperFirst).join(' '),
  value: position,
  name: position.split('-').join(' '),
}));

export function Position() {
  const [showToastMap, setShowToastMap] = useState<{ [key: string]: boolean }>({});

Prefix Icon

Toast supports icons from the @ocean-network-express/magenta-ui/icons package.
The prop icon support to add icon or other content to the left side.

Source Code

import { CheckCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function PrefixIcon() {
  const [showToast, setShowToast] = useState(false);
  return (
    <>
      <Button onClick={() => setShowToast((prev) => !prev)}>Toast with icon</Button>
      <Toast
        icon={<CheckCircleOutline />}
        title="This is a toast message"

Toast Actions

Toast can include button actions by passing the actions prop.
The actions prop is an array of objects with the following properties:
- label: The text to display on the button.
- All other props are the same as the Button component.
- Some default props in the action button are color is neutral, variant is ghost, and size is md.

Source Code

import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function ToastAction() {
  const [showToast, setShowToast] = useState(false);
  const handleCloseToast = () => setShowToast(false);

  return (
    <>
      <Button onClick={() => setShowToast((prev) => !prev)}>Toast with action</Button>
      <Toast
        title="This is a toast message"

Close a toast

Remove Close Icon Button

Toast can remove the close button icon or by setting the closable prop to false.

Source Code

import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function UnClosableToast() {
  const [showToast, setShowToast] = useState(false);
  return (
    <>
      <Button onClick={() => setShowToast((prev) => !prev)}>Toast without Icon</Button>
      <Toast title="Toast without close icon" open={showToast} closable={false} />
    </>
  );
}

Close duration

Toast can be set to automatically call onClose prop after a certain duration.
Default duration is 10000ms, it can be changed by passing the duration prop.

Source Code

import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function CloseDurationToast() {
  const [showToast, setShowToast] = useState(false);
  return (
    <>
      <Button onClick={() => setShowToast((prev) => !prev)}>Toast 2000ms duration</Button>
      <Toast
        title="Toast will be auto-closed after 2000 ms."
        onClose={() => setShowToast(false)}
        open={showToast}

To prevent the toast from closing automatically, set the duration prop to 0 or Infinity.

Source Code

import { Button, Toast } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export function NotCloseToast() {
  const [showToast, setShowToast] = useState(false);
  return (
    <>
      <Button onClick={() => setShowToast((prev) => !prev)}>Not auto close Toast</Button>
      <Toast
        title="Toast will not be auto-closed."
        onClose={() => setShowToast(false)}
        open={showToast}

Was this page helpful?