Snackbar

Snackbars provide brief notifications. The component is also known as a toast.

Author

• @author Vigneshwaran [email protected]

Link

Story Book Link stepper

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_snackbar

Import component

import { Snackbar } from '@licuido-ui/ui_snackbar';

Usage

<Snackbar message='' open={} />

Image

Sample Code

<Snackbar
  open={true}
  duration={60000}
  severity="success"
  message="Toast message here"
  anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
  backgroundColor=""
  width=""
  startIcon={<TickIcon />}
  endIcon={<CloseIcon />}
  fontSize=""
  fontWeight={400}
  fontColor=""
/>

Props

| Name | Type | Default | Description | | ----------------- | -------------------------------------------------------------------------- | ------------------------------------------- | ----------------------------------------------------------------------------------------------------- | | className | string | | Additional CSS class for styling purposes. | | sx | SxProps | | The style object that customizes the appearance of the Snackbar. | | backgroundColor | string | | The background color of the Snackbar. | | width | string | | The width of the Snackbar. | | open | boolean | true | Controls whether the Snackbar is visible. | | severity | 'error' or 'success' or 'warning' or 'info' | 'success' | The severity of the alert. | | duration | number | 60000 | The duration (in milliseconds) for which the Snackbar should be visible before automatically closing. | | handleClose | () => void | | Callback function to handle the close event. | | fontSize | string | | The font size of the message. | | fontWeight | number or undefined | 400 | The font weight of the message. | | fontColor | string | | The font color of the message. | | message | string | 'Toast message here' | The message content of the Snackbar. | | startIcon | React.ReactNode | <TickIcon /> | The icon displayed at the start of the message. | | endIcon | React.ReactNode | <CloseIcon /> | The icon displayed at the end of the message. | | anchorOrigin | { vertical: 'top' or 'bottom'; horizontal: 'left' or 'center' or 'right' } | { vertical: 'top', horizontal: 'center' } | The anchor position of the Snackbar. | | key | string or undefined | | A unique key to identify the Snackbar instance. |