Toasts
Table of contents
Usage
import { cuteToast } from 'cute-alert'
cuteToast({
type: 'success',
title: 'Title',
description: 'Description',
timer: 5000
}).then((event) => {
if (event === 'close') {
console.log('toast closed')
}
})
event
has the AlertToastValue
type and at the moment, its value will always be close
. For more information about types, check out the Typescript page.
Options
Name | Description | Type | Default Value | Optional |
---|---|---|---|---|
type | Type of toast | 'error' | 'info' | 'success' | 'warning' | 🚫 | |
title | Text to be displayed on title | string | ✅ | |
description | Text to be displayed on description | string | ✅ | |
timer | Timer to close the toast | number | ✅ | |
vibrationPattern | Pattern to pulse the vibration hardware on the device when the toast pops up | number | number[] | ✅ | |
soundSrc | Sound source to play when the toast pops up | string | ✅ | |
imageSrc | Image source (in case you wish to overwrite the default ones) | string | ✅ | |
imageSize | Image size | number | 80 | ✅ |
Additional docs
Vibration will not work on Safari as the vibrate()
method is not compatible with it.
CSS Variables
--cute-toast-primary
and --cute-toast-primary-light
are set according to --cute-toast-color-{type}
and --cute-toast-color-{type}-light
respectively.
CSS Variable | Default Value |
---|---|
–cute-toast-z-index | 10 |
–cute-toast-gap | 0.75rem |
–cute-toast-border-radius | 0.25rem |
–cute-toast-box-shadow | 0 0 20px rgb(0, 0, 0, 0.2) |
–cute-toast-background-color | var(--cute-toast-primary) |
–cute-toast-color-error | #d85261 |
–cute-toast-color-error-light | #e5a4b4 |
–cute-toast-color-success | #2dd284 |
–cute-toast-color-success-light | #6edaa4 |
–cute-toast-color-warning | #fada5e |
–cute-toast-color-warning-light | #fcecae |
–cute-toast-color-info | #88cef7 |
–cute-toast-color-info-light | #c3e6fb |
–cute-toast-padding | 0.75rem 1rem |
–cute-toast-width | 100% |
–cute-toast-content-margin | 0 1.5rem 0 1rem |
–cute-toast-title-font-size | 1rem |
–cute-toast-title-font-family | 'Open Sans', sans-serif |
–cute-toast-title-font-weight | 700 |
–cute-toast-title-color | #fff |
–cute-toast-description-font-size | 0.875rem |
–cute-toast-description-font-family | 'Open Sans', sans-serif |
–cute-toast-description-font-weight | 600 |
–cute-toast-description-color | #fff |
–cute-toast-close-color | rgb(0, 0, 0, 0.2) |
–cute-toast-close-color-hover | rgb(0, 0, 0, 0.5) |
–cute-toast-timer-background-color | var(--cute-toast-primary-light) |