Alert/Popups
Avatar This is a guideline for you on how to create you first product in your store
Alerts
This is a guideline for you on how to create you first product in your store
Error
You have entered a wrong password.
Warning
Password doesn’t match
Info
Password doesn’t match
Success
You have successfully signed in.
React js
import * as React from 'react';
import Alerts from 'vestarplus/Alerts';
export default function BasicAlertsfunction() {
return (
//Alerts have four status [error,warning,info,success]
//and a message properity for your custom message for your alert
//there is an onClose properity where the function for closing the alert can be called
<Alerts status="error" message="You have entered a wrong password." onClose={() => handleAlertClose()} />
<Alerts status="warning" message="Password doesn’t match" onClose={() => handleAlertClose()} />
<Alerts status="info" message="Password doesn’t match" onClose={() => handleAlertClose()} />
<Alerts status="success" message="You have successfully signed in." onClose={() => handleAlertClose()} />
);
}
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="alertContainer"></div>
<script src="script.js"></script>
</body>
</html>
AlertPills
This is a guideline for you on how to create you first product in your store
Error
You have entered a wrong password.
Warning
Password doesn’t match
Info
Password doesn’t match
Success
You have successfully signed in.
React js
import * as React from 'react';
import AlertPills from 'vestarplus/AlertPills';
export default function BasicAlertPillsfunction() {
return (
//AlertPills have four status [error,warning,info,success]
//and a message properity for your custom message for your alert
//there is an onClose properity where the function for closing the alert can be called
<AlertPills status="error" message="You have entered a wrong password." onClose={() => handleAlertClose()} />
<AlertPills status="warning" message="Password doesn’t match" onClose={() => handleAlertClose()} />
<AlertPills status="info" message="Password doesn’t match" onClose={() => handleAlertClose()} />
<AlertPills status="success" message="You have successfully signed in." onClose={() => handleAlertClose()} />
);
}
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="alertContainer"></div>
<script src="script.js"></script>
</body>
</html>
Badges
This is a guideline for you on how to create you first product in your store
XSmall
Paid
Paid
Info
Info
Pending
Pending
Unpaid
Unpaid
Medium
Paid
Paid
Info
Info
Pending
Pending
Unpaid
Unpaid
React js
import * as React from 'react';
import Badges from 'vestarplus/Badges';
/**
* Example of using the Badges component.
*
* @component
* @example
* // Basic usage with default settings
* <Badges status="success" size="xsmall" showDot={true} label="Success Badge" />
*
* // Customizing badge with different status, size, and hiding the dot
* <Badges status="warning" size="medium" showDot={false} label="Warning Badge" />
*
* @param {Object} props - The properties of the Badges component.
* @param {string} props.status - The status of the badge (error, warning, info, success).
* @param {string} props.size - The size of the badge (xsmall, medium).
* @param {boolean} props.showDot - Flag to determine whether to show the dot or not.
* @param {string} props.label - The label or text content of the badge.
*
* @returns {React.Component} The rendered Badges component.
*/
export default function ExampleBadgesComponent(props) {
return (
<div>
{/* Basic usage with default settings */}
<Badges status="success" size="xsmall" showDot={true} label="Success Badge" />
{/* Customizing badge with different status, size, and hiding the dot */}
<Badges status="warning" size="medium" showDot={false} label="Warning Badge" />
</div>
);
}
HTMLCSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Badges</title>
</head>
<body>
<div>
<div class="badge xsmall success">
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="dot">
<circle cx="8" cy="8" r="8" />
</svg>
Label
</span>
</div>
<div class="badge medium warning">
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="dot">
<circle cx="8" cy="8" r="8" />
</svg>
Label
</span>
</div>
</div>
</body>
</html>