> For the complete documentation index, see [llms.txt](https://docs.questera.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.questera.ai/questera-ai-sdks/react-sdk-components/miscellaneous/alert-component.md).

# Alert Component

## Component Visuals

{% tabs %}
{% tab title="Overview" %}

<figure><img src="/files/9SNnQs31qqZn8MjlneYh" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title=" Alert" %}

<figure><img src="/files/UZxSZ5HXKP9hMqfsXZwR" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
To unlock early access to the component                                                           [**Get Access**](https://bijfwfnqtsj.typeform.com/to/eUXDpbuh)
{% endhint %}

## Installation

To install the `Quest react-sdk` into your project, follow these steps:

* Open your terminal/command prompt.
* Navigate to your project's root directory using the `cd` command if you're not already there.
* Run the following command to install the `quest-sdk` package using npm:

```jsx
npm install @questlabs/react-sdk
```

> This command will download and install the package and its dependencies into your project.

{% hint style="info" %}
Make sure your project has npm and Node.js installed, and that you have the necessary permissions to install packages in your project directory.
{% endhint %}

### Usage

To display a toast notification, you can use the following methods:

#### `showToast.success({ text, duration })`

Displays a success toast message.

* `text` (optional): The text message to display in the toast (default: 'This is a success message').
* `duration` (optional): The duration (in milliseconds) for which the toast is displayed (default: 2000ms).

Example:

```javascript
import { showToast } from "@questlabs/react-sdk"
import '@questlabs/react-sdk/dist/style.css'
showToast.success({
  text: 'Success! Your operation was completed.',
  duration: 3000,
});

// also you can just pass the string 
showToast.success("Submitted successfully");
```

Similarly we have showToast.warn, showToast.error, showToast.info as well &#x20;

#### Or you can pass a custom element to showToast example:

```
showToast(<div>This is a toast element<div/>)
```

### Example Usage

Here's an example of how to use the `showToast` service within your React application:

```javascript
import { showToast } from '@questlabs/react-sdk'; // Import the toast module.

function MyComponent() {
  const handleSuccessClick = () => {
    showToast.success({
      text: 'Operation successful!',
      duration: 3000,
    });
  };

  const handleErrorClick = () => {
    showToast.error({
      text: 'An error occurred.',
      duration: 4000,
    });
    //or
    showToast.error("An error occurred");
  };

  return (
    <div>
      <button onClick={handleSuccessClick}>Show Success Toast</button>
      <button onClick={handleErrorClick}>Show Error Toast</button>
    </div>
  );
}
```

This documentation provides an overview of the `showToast` service, installation instructions (not required), usage examples, and customization options. You can adapt it to your specific needs and provide more details if necessary.

## Demo

{% embed url="<https://drive.google.com/file/d/1NKX0R0GOgUkAWgnNHtR3MNpH0T45t22A/view?usp=drive_link>" %}