npm package: @highlight-ui/toast
Description: Toast component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 6.3.12

[![npm](https://img.shields.io/npm/v/@highlight-ui/toast)](https://www.npmjs.com/package/@highlight-ui/toast)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/559b55-toast/b/491cc1)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-toast--basic-toast)

# @highlight-ui/toast

Using npm:

```bash
npm install @highlight-ui/toast
```

Using yarn:

```bash
yarn add @highlight-ui/toast
```

Using pnpm:

```bash
pnpm install @highlight-ui/toast
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/toast');
```

Once the package is installed, you can import the library:

```ts
import { toaster, ToastProps } from '@highlight-ui/toast';
```

## Usage

```tsx
import React from 'react';
import { toaster } from '@highlight-ui/toast';
import { Button } from '@highlight-ui/button';

export default function ToastExample() {
  return (
    <Button
      onClick={() => {
        toaster.notify({
          ...restArgs,
          variant,
          children: `I am a toast`,
        });
      }}
    >
      Open toast
    </Button>
  );
}
```

## Props 📜

| Prop                | Type                                            | Required | Default     | Description                                                              |
| :------------------ | :---------------------------------------------- | :------- | :---------- | :----------------------------------------------------------------------- |
| `children`          | `React.ReactNode`                               | Yes      |             | The content of the toast                                                 |
| `className`         | `string`                                        | No       |             | Allows providing a custom class name                                     |
| `actions`           | `React.ReactNode`                               | No       |             | A fragment with buttons that will be rendered at the bottom of the toast |
| `autoClose`         | `boolean`                                       | No       | `true`      | Specify whether the toast should auto close after the duration time ends |
| `duration`          | `number`                                        | No       | `5000`      | Duration in milliseconds that the toast remains visible                  |
| `id`                | `string`                                        | No       |             | The ID of the toast                                                      |
| `isVisible`         | `boolean`                                       | No       | `true`      | Specify whether the toast is visible                                     |
| `onClose`           | `() => void`                                    | No       |             | A callback when the toast is closed                                      |
| `onOpen`            | `() => void`                                    | No       |             | A callback when the toast is open                                        |
| `onRequestToClose`  | `() => void`                                    | No       |             | A callback when the user request the toast to be closed                  |
| `onRequestToRemove` | `() => void`                                    | No       |             | A callback when the user request the toast to be removed                 |
| `showCloseButton`   | `boolean`                                       | No       | `true`      | Specify whether the close button should be rendered                      |
| `variant`           | `"highlight", "success", "warning", "critical"` | No       | `highlight` | Defines which variant of the Toast to render                             |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/559b55-toast/b/491cc1) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).