RUI.next

Feedback
Toast

Toast

Toast represents lightweight feedback.

Toast only supports Imperative calls.

Toast.show("some content");
Toast.show("some content");

Example

Basic usage of Toast component.

Basic Toast
Click to show simple toast
Toast with Callback function (`RUI-log` in Console log)
Click to show toast with callback

Showcase more usage of Toast component.

API

PropertiesDescriptionTypeDefault
afterCloseThe callback after the Toast is completely closed() => void-
contentThe Toast text contentReact.ReactNode-
durationPrompt duration, if it is 0, it will not be closed automaticallynumber2000
getContainerThe customized parent container of the light promptHTMLElement | (() => HTMLElement) | nulldocument.body
iconThe Toast icon'success' | 'fail' | 'loading' | React.ReactNode-
maskClassNameThe Toast mask class namestring-
maskClickableWhether allowed to click the backgroundbooleantrue
maskStyleThe Toast mask styleReact.CSSProperties-
positionVertical display position'top' | 'bottom' | 'center''center'
stopPropagationStop the propagation of some events.PropagationEvent[]['click']