npm package: @licuido-ui/ui_snackbar
Description: Snackbars provide brief notifications. The component is also known as a toast.
Latest version: 3.0.1

# Snackbar

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

### Author

- @author Vigneshwaran <vigneshwaran@crayond.co>

## Link

[Story Book Link stepper](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_snackbar
```

## Import component

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

## Usage

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

## Image

![alt text](./snackbar.png)

## Sample Code

```jsx
<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<Theme>                                                             |                                             | 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.                                                       |