Toast

Toast component with pre-built positioning, different icons, themes and support for
light and dark mode.

Title

Message Body

Installation

npx @ayushmxxn/serenity-ui@latest add toast

Usage

import React from 'react'
import Toast from './components/ui/Toast'

function Page() {
  return (
    <div>
      <Toast
          position='top-right'
          variant='default'
          mode='light'
          timer={10}
          loader={10000}
          icon='success'
          title='Title'
          body='Message Body'
        />
    </div>
  )
}

export default Page;

Props

Prop Name	Type	Description
title	string	Title of Notification
body	string	Message body of Notification
icon	string	success / error / warning / info
varient	string	default / colored
position	string	top-right / top-left / bottom-right / bottom-left
timer	number	How much time the notification should be displayed
mode	string	Specifies the color scheme. Possible values are light or dark.