It is a small message that shows up in a box at the corner of the screen and disappears on its own after a few seconds. It is simple feedback about an operation in which current activity remains visible and interactive.

Heading- A title to explain what the message content is about.
Message - The information that the system wants to send to users. Message content can include paragraphs and links.
Close button - Optional to close the message immediately.
Progress bar - The display time remaining of the message before it disappears.

Examples

() => {
  const notify = () => toast(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="helpCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Default</div>
        <div>This is a default alert which give more information for users.</div>
      </div>
    </div>
  ));
  const notifyPositive = () => toast.success(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="checkmarkCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Positive</div>
        <div>Provides a positive response to user actions.</div>
      </div>
    </div>
  ), {
  });
  const notifyNegative = () => toast.error(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="alert" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Negative</div>
        <div>Shown when something goes wrong, or provide a negative response to user actions.</div>
      </div>
    </div>
  ), {
  });
  const notifyWarning = () => toast.warn(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="warning" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Warning</div>
        <div>Used to help users avoid error situations. Consists of a description of potential errors.</div>
      </div>
    </div>
  ), {
  });
  const notifyInformation = () => toast.info(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="informationCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Information</div>
        <div>This is a primary alert which give more information for users.</div>
      </div>
    </div>
  ), {
  });

  return (
    <div>
      <Button onClick={notify} variant="secondary" className="u-marginHorizontalExtraSmall">Default</Button>
      <Button onClick={notifyPositive} variant="secondary" className="u-marginHorizontalExtraSmall">Positive</Button>
      <Button onClick={notifyNegative} variant="secondary" className="u-marginHorizontalExtraSmall">Negative</Button>
      <Button onClick={notifyWarning} variant="secondary" className="u-marginHorizontalExtraSmall">Warning</Button>
      <Button onClick={notifyInformation} variant="secondary" className="u-marginHorizontalExtraSmall">Information</Button>
      <ToastContainer />
    </div>
  );
};

() => {
  const notify = () => toast(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="helpCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Default</div>
        <div>This is a default alert which give more information for users.</div>
      </div>
    </div>
  ));
  const notifyPositive = () => toast.success(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="checkmarkCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Positive</div>
        <div>Provides a positive response to user actions.</div>
      </div>
    </div>
  ), {
  });
  const notifyNegative = () => toast.error(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="alert" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Negative</div>
        <div>Shown when something goes wrong, or provide a negative response to user actions.</div>
      </div>
    </div>
  ), {
  });
  const notifyWarning = () => toast.warn(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="warning" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Warning</div>
        <div>Used to help users avoid error situations. Consists of a description of potential errors.</div>
      </div>
    </div>
  ), {
  });
  const notifyInformation = () => toast.info(() => (
    <div className="u-flex u-flexGrow-1">
      <div className="u-marginRightExtraSmall">
        <Icon name="informationCircle" size="medium" />
      </div>
      <div className="u-flexGrow-1">
        <div className="u-fontMedium u-marginBottomExtraSmall">Information</div>
        <div>This is a primary alert which give more information for users.</div>
      </div>
    </div>
  ), {
  });
  return (
    <div>
      <Button onClick={notify} variant="secondary" className="u-marginHorizontalExtraSmall">Default</Button>
      <Button onClick={notifyPositive} variant="secondary" className="u-marginHorizontalExtraSmall">Positive</Button>
      <Button onClick={notifyNegative} variant="secondary" className="u-marginHorizontalExtraSmall">Negative</Button>
      <Button onClick={notifyWarning} variant="secondary" className="u-marginHorizontalExtraSmall">Warning</Button>
      <Button onClick={notifyInformation} variant="secondary" className="u-marginHorizontalExtraSmall">Information</Button>
      <ToastContainer />
    </div>
  );
};

Design Reference

N/A

API

ToastContainer

import { ToastContainer } from '@gotitinc/design-system'Copy import code for the ToastContainer component

Name	Type	Default	Description
position	`'top-left'` \| `'top-right'` \| `'top-center'` \| `'bottom-left'` \| `'bottom-right'` \| `'bottom-center'`	`'top-right'`	One of top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
autoDismiss	boolean \| number	`5000`	Delay in ms to close the toast. If set to false, the notification needs to be closed manually
dismissible	boolean	`true`	Renders a properly aligned dismiss button
hideProgressBar	boolean	`false`	Display or not the progress bar below the toast(remaining time)

Toast Messages

Introduction#

Examples#

Design Reference#

API#

ToastContainer#

Introduction

Examples

Design Reference

API

ToastContainer