Toast

Temporarily displayed messages that provide additional information or feedback about a user's action or event. Hovering over a message will keep it in view.

children

A toast!

A toast!

triggered

onShow

(e) => console.log('onShow', e)

(e) => console.log('onShow', e)

onHide

(e) => console.log('onHide', e)

(e) => console.log('onHide', e)

onHidden

(e) => console.log('onHidden', e)

(e) => console.log('onHidden', e)

showDuration

isCloseable

type

import * as React from "react";
import { Toast } from "@nulogy/components";

export default () => {
  return (
    <Toast
      triggered={false}
      onShow={e => console.log("onShow", e)}
      onHide={e => console.log("onHide", e)}
      onHidden={e => console.log("onHidden", e)}
    >
      A toast!
    </Toast>
  );
}

import * as React from "react";
import { Toast } from "@nulogy/components";

export default () => {
  return (
    <Toast
      triggered={false}
      onShow={e => console.log("onShow", e)}
      onHide={e => console.log("onHide", e)}
      onHidden={e => console.log("onHidden", e)}
    >
      A toast!
    </Toast>
  );
}

Use when

There are low priority messages to display in response to some event or action — i.e. messages that are helpful, although not intrinsic to the experience
The information contained is very concise and easy to read and understand within seconds
The message is less than 2 lines long or 150 characters

Don't use when

The information contained is vital to completing a task
The message is too long to read and understood within seconds (> 150 characters)

Props

Name	Type	Default	Description
children	react node		Inner content.
triggered	boolean	false	Whether to display to the tooltip or not
onShow	function		callback that is called when the tooltip is shown
onHide	function		callback that is called when the tooltip is dismissed or begins to fade out
onHidden	function		callback that is called when the tooltip has been completely hidden after the fade out animation is complete
showDuration	number		length of time in ms to display the Toast before hiding it
isCloseable	boolean		displays a close button in the Toast when true, and the Toast must then by manually dismissed by clicking the close button
type	enum	informative	The type of alert. Accepts informative, danger, warning and success.

Related Components

Alert