Toast

<bh-toast> | BharatToast

The Toast component provides non-intrusive, auto-dismissed alert messages with support for different types, custom message, and positions.

---

Open in

Show Success Toast

Show Warning ToastShow Warning ToastShow Warning Toast

Basic Usage

Preview

Open in

Show Success Toast

HTML

<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="successBtn" onclick=' showToast({
    message: "Success smells like masala chai in the morning!",
    variant: "success",
    position: "bottom-center",
  });'> Show Success Toast
</bh-button>

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
import { BharatToast, showToast } from 'bharat-ui/react/components/toast';

function App() {
return (
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="successBtn" onclick=' showToast({
    message: "Success smells like masala chai in the morning!",
    variant: "success",
    position: "bottom-center",
  });'> Show Success Toast
</BharatButton>
);
}

export default App;

---

Show Toast Programmatically

JS

import { showToast } from 'path/to/toast.js';

showToast({
  message: 'Success! Your action completed.',
  type: 'success',
  position: 'bottom-left',
  duration: 3000
});

---

Variants

Types

Preview

Open in

Show Success Toast

Show Error ToastShow Warning ToastShow Information Toast

HTML

          <--Success Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="success" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success",
position: "bottom-center",
});'>
Show Success Toast
</bh-button>

            <--Error Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="danger" id="error" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "error",
position: "bottom-center",
});'>Show Error Toast</bh-button>

            <--Warning Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="warning" id="warning" onclick=' showToast({
message: "Warning: Chai is getting cold! Act fast!",
variant: "warning",
position: "bottom-center"
});'>Show Warning Toast</bh-button>

            <--Info Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary" onclick='showToast({
message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
variant: "primary",
position: "bottom-center",
});'>Show Info Toast</bh-button>

React

export default App;

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
import { BharatToast, showToast } from 'bharat-ui/react/components/toast';

function App() {
return (
<>
//Success Toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="successBtn" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success",
position: "bottom-center",
});'> Show Success Toast
</BharatButton>

//Error Toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="danger" id="error" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "error",
position: "bottom-center",
});'>Show Warning Toast
</BharatButton>

// Warning toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="warning" id="warning" onclick=' showToast({
message: "Warning: Chai is getting cold! Act fast!",
variant: "warning",
position: "bottom-center"
});'>Show Warning Toast
</BharatButton>

//Info toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary" onclick='showToast({
message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
variant: "primary",
position: "bottom-center",
});'>Show Info Toast
</BharatButton>
</>
);
}

---

Outline

Preview

Open in

Show Success Toast

Show Error ToastShow Warning ToastShow Info Toast

HTML

          <--Success-outline Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="success-outline" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success-outline",
position: "bottom-center",});'>
Show Success Toast
</bh-button>

            <--Error-outline Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="danger" id="error-outline" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "error-outline",
position: "bottom-center",
);'>Show Error Toast</bh-button>

            <--Warning-outline Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="warning" id="warning-outline" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "warning-outline",
position: "bottom-center",
});'>Show Warning Toast</bh-button>

            <--Info-outline Toast--!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary-outline" onclick='showToast({
    message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
    variant: "primary-outline",
    position: "bottom-center"
});'>Show Info Toast</bh-button>

React

import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
import { BharatToast, showToast } from 'bharat-ui/react/components/toast';

function App() {
return (
<>
// Success Toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="success-outline" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success-outline",
position: "bottom-center",});'>
Show Success Toast
</BharatButton>

//Error Toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="danger" id="error-outline" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "error-outline",
position: "bottom-center",
);'>Show Error Toast
</BharatButton>


// Warning toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="warning" id="warning-outline" onclick=' showToast({
message: "Error 404: Chai not found. This is a serious issue.",
variant: "warning-outline",
position: "bottom-center",
});'>Show Warning Toast
</BharatButton>

//Info Toast
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary-outline" onclick='showToast({
message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
variant: "primary-outline",
position: "bottom-center"
});'>Show Info Toast
</BharatButton>
</>
);
}

Positions

The options available to position the toast notification are ‘top-left’, ‘top-center’, ‘top-right’, ‘bottom-left’, ‘bottom-center’, ‘bottom-right’

Preview

Open in

Show Success Toast

Show Info Toast

HTML

<--Bottom-left Position --!>
<div style="margin-top:20px">
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="success" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success",
position: "bottom-left",
});'>
Show Success Toast
</bh-button>
</div>

<--Bottom-right Position --!>
<bh-button style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary" onclick='showToast({
message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
variant: "primary",
position: "bottom-right"
});'>Show Info Toast</bh-button>
</div>

React

//Bottom-left Position
import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
import { BharatToast, showToast } from 'bharat-ui/react/components/toast';

function App() {
return (
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="success" id="success" onclick=' showToast({
message: "Success smells like masala chai in the morning!",
variant: "success",
position: "bottom-left",
});'>
Show Success Toast
</BharatButton>
);
}

export default App;

//Bottom-right Position
import React from 'react';
import { BharatButton } from 'bharat-ui/react/components/button'
import { BharatToast, showToast } from 'bharat-ui/react/components/toast';

function App() {
return (
<BharatButton style="display:flex;flex-direction:row; justify-content:center;" variant="primary" id="primary" onclick='showToast({
message: "Fun Fact: Chai fixes 99% of bugs… emotionally.",
variant: "primary",
position: "bottom-right"
});'>Show Info Toast
</BharatButton>
);
}

export default App;

---

Properties

Property	Type	Description
message	string	Toast message content
variant	string	One of info, success, warning, error
position	string	Predefined or "custom-position"

Methods

Method	Description
showToast(options)	Function call to display the dialog, takes options object as a parameter. e.g - { message:"Show toast", variant:"primary",position:"bottom-right"}

---