@highlight-ui/toast

Using npm:

npm install @highlight-ui/toast

Using yarn:

yarn add @highlight-ui/toast

Using pnpm:

pnpm install @highlight-ui/toast

In your (S)CSS file:

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

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

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

Usage

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 for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.