Toast

The Toast component allows for displaying a message to the user in a non-intrusive way. It is used to display a message for a short period of time and then disappear. It is often used to display a message after a user action, such as a successful login or a failed login.

Toast.Icon can be used to create a styled icon within the Toast.Header component.

For more prop details about Toast Header, Body, and Container see RBS Toast.

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gridGap: '1rem', }} > {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((bg) => ( <Toast key={bg} bg={bg} className="mb-3"> <Toast.Header> <div className="me-2"> <Toast.Icon variant={bg}> <span className="icon-placeholder" /> </Toast.Icon> </div> <strong className="me-auto">Header</strong> <span className="me-2 fs-xxs fw-normal">Time ago</span> </Toast.Header> <Toast.Body>Body</Toast.Body> </Toast> ))} </div>

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
    gridGap: '1rem',
  }}
>
  {['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'].map((bg) => (
    <Toast key={bg} bg={bg} className="mb-3">
      <Toast.Header>
        <div className="me-2">
          <Toast.Icon variant={bg}>
            <span className="icon-placeholder" />
          </Toast.Icon>
        </div>
        <strong className="me-auto">Header</strong>
        <span className="me-2 fs-xxs fw-normal">Time ago</span>
      </Toast.Header>
      <Toast.Body>Body</Toast.Body>
    </Toast>
  ))}
</div>

Positioning

Using the ToastContainer allows you to position the Toast notification in different regions of the screen.

Result

Loading...

Live Editor

<div className="position-relative border" style={{ minHeight: 240 }}> <ToastContainer className="p-3" position="bottom-end"> <Toast bg="success"> <Toast.Header> <div className="me-2"> <Toast.Icon variant="success"> <span className="icon-placeholder" /> </Toast.Icon> </div> <strong className="me-auto">Header</strong> <span className="me-2 fs-xxs fw-normal">Time ago</span> </Toast.Header> <Toast.Body>Body</Toast.Body> </Toast> </ToastContainer> </div>

<div className="position-relative border" style={{ minHeight: 240 }}>
  <ToastContainer className="p-3" position="bottom-end">
    <Toast bg="success">
      <Toast.Header>
        <div className="me-2">
          <Toast.Icon variant="success">
            <span className="icon-placeholder" />
          </Toast.Icon>
        </div>
        <strong className="me-auto">Header</strong>
        <span className="me-2 fs-xxs fw-normal">Time ago</span>
      </Toast.Header>
      <Toast.Body>Body</Toast.Body>
    </Toast>
  </ToastContainer>
</div>

Analytics

The Toast component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'Toast',
	actions: {
		onClose: { type: 'TOAST_ON_CLOSE', payload: 'Close' },
	},
};

Props

Toast

ToastIcon