Toast

Import

import UseToast from '@/hooks/useToast' // import custom hook

const [showToast] = UseToast()

Examples

Position

// showToast(position, state, message, autohide)

// POSITION OPTIONS
// position Y = 'top' | middle | 'bottom'
// position X = 'left' | center | 'right'

<!-- examples -->
<Button onClick={() => showToast('top right', 'info', '"top right"', true)}>
	Top Right
</Button>
<Button onClick={() => showToast('middle center', 'info', '"middle center"', true)}>
	Middle Center
</Button>
<Button onClick={() => showToast('bottom left', 'info', '"bottom left"', true)}>
	Bottom Left
</Button>

State

// showToast(position, state, message, autohide)
				
// STATE OPTIONS
// state = 'info' | 'success' | 'warning' | 'danger' || any Tailwind classes eg: 'bg-white border text-dark'


<!-- STATE -->
<Button
    className='info'
    onClick={() => showToast('middle center', 'info', '"info"')}
>
    Info
</Button>
<Button
    className='success'
    onClick={() => showToast('middle center', 'success', '"success"')}
>
    Success
</Button>
<Button
    className='warning'
    onClick={() => showToast('middle center', 'warning', '"warning"')}
>
    Warning
</Button>
<Button
    className='danger'
    onClick={() => showToast('middle center', 'error', '"error"')}
>
    Error
</Button>
<Button
	className='error outline'
	onClick={() =>
		showToast('middle center', 'bg-white border-2 border-error text-error', '"custom"', true)
	}
>
	Custom
</Button>

Message

Message may be either a string or node/html content.

String

<Button
	className='info'
	onClick={() =>
		showToast(
			'middle right',
			'info',
			'Any message as string',
			false
		)
	}
>
	String
</Button>

Node

import { Spinner } from '@/ui'
				
<Button
	className='info'
	onClick={() =>
		showToast( 
			'center middle', 
			'',
			<Spinner className='w-24 rounded-full bg-warning p-0' />, 
			false
		)
	}
>
	Loading
</Button>

Dismissable

Set autohide to false to disable autohide. Add dismissable class to add a close button.

<Button
	className='info'
	onClick={() =>
		showToast(
			'middle right',
			'info dismissable',
			'This Toast has a close button',
			false
		)
	}
>
	Dismissable
</Button>