# SnackBars
SnackBars displays short messages for users to know about the state of a particular process.
Home
/ SnackBars
#
Bottom Left SnackBar
Simple Bottom left SnackBar with slide animation which goes off after 2sec
React / Next.js
#
Bottom Right SnackBar
Simple Bottom Right SnackBar with scale up animation which goes off after 2sec
React / Next.js
SnackBars
SnackBars are good for displaying simple messages to the user
| Prop | Description | Value(s) |
|---|---|---|
| `message` | The main text message displayed inside the SnackBar. | `<string>` |
| `open` | Controls whether the SnackBar is visible or hidden. | `true | false` |
| `setOpen` | Function used to toggle the visibility of the SnackBar. | `(val: boolean) => void` |
| `close` | A ReactNode used to render a close icon or button inside the SnackBar. | `<ReactNode> (e.g., icon, text, button)` |
| `position` | Sets the position of the SnackBar on the screen. | `top-right | top-left | bottom-right | bottom-left` |
| `animation` | Adds an entry animation to the SnackBar when it appears. | `SlideBottom | SlideTop | SlideRight | SlideLeft | ScaleUp | Opacity` |
| `duration` | The time it takes for the animation to complete (in seconds). | `<number> (e.g., 0.3)` |
| `autoHide` | Enables automatic hiding of the SnackBar after a timeout. | `true | false` |
| `autoHideDuration` | The time (in milliseconds) before the SnackBar auto-hides when autoHide is true. | `<number> (e.g., 3000)` |
| `flat` | Removes background and shadow, making the SnackBar flat. | `true | false` |
| `funcss` | Custom class name(s) to style the SnackBar container. | `<string>` |