Buttons
This is a guideline for you on how to create you first product in your store
Primary
This is a guideline for you on how to create you first product in your store
XSmall
Small
Medium
Large
XLarge
Secondary Buttons
This is a guideline for you on how to create you first product in your store
Secondary Buttons
This is a guideline for you on how to create you first product in your store
XSmall
Small
Medium
Large
XLarge
React js
import React from 'react';
import Buttons from 'vestarplus/Buttons';
/**
* Buttons Component
*
* A customizable button component for different purposes.
*
* @component
* @example
* // Basic usage with default settings
* <Buttons type="primary" size="medium">Click me</Buttons>
*
* // Disabled button with a secondary style
* <Buttons type="info" size="large" disabled secondary>Disabled Button</Buttons>
*
* // Example with different types and sizes
* <div>
* <Buttons type="primary" size="small">Small Primary</Buttons>
* <Buttons type="error" size="medium">Medium Error</Buttons>
* <Buttons type="warning" size="large">Large Warning</Buttons>
* <Buttons type="info" size="xlarge">Extra Large Info</Buttons>
* <Buttons type="success" size="medium" disabled>Disabled Success</Buttons>
* <Buttons type="primary" size="medium" secondary>Secondary Button</Buttons>
* </div>
*
* @param {Object} props - The properties of the Buttons component.
* @param {string} props.type - The type of the button.
* Possible values: 'primary', 'error', 'warning', 'info', 'success'.
* @param {string} props.size - The size of the button.
* Possible values: 'xsmall', 'small', 'medium', 'large', 'xlarge'.
* @param {boolean} [props.disabled=false] - Flag to determine whether the button is disabled.
* @param {boolean} [props.secondary=false] - Flag to determine whether the button has a secondary style.
* @param {ReactNode} props.children - The content of the button.
*
* @returns {React.Component} The rendered Buttons component.
*/
const ExampleButtonsComponent = (props) => {
return (
<div>
{/* Basic usage with default settings */}
<Buttons type="primary" size="medium">Click me</Buttons>
{/* Disabled button with a secondary style */}
<Buttons type="info" size="large" disabled secondary>Disabled Button</Buttons>
{/* Example with different types and sizes */}
<div>
<Buttons type="primary" size="small">Small Primary</Buttons>
<Buttons
type="custom"
size="xsmall"
customStyles={{
backgroundColor: '#FF0000',
borderColor: '#990000',
hoverBackgroundColor: '#FF3333',
pressBackgroundColor: '#CC0000',}} >
custom buttons
</Buttons>
<Buttons type="error" size="medium">Medium Error</Buttons>
<Buttons type="warning" size="large">Large Warning</Buttons>
<Buttons type="info" size="xlarge">Extra Large Info</Buttons>
<Buttons type="success" size="medium" disabled>Disabled Success</Buttons>
<Buttons type="primary" size="medium" secondary>Secondary Button</Buttons>
</div>
</div>
);
};
export default ExampleButtonsComponent;
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>
<button class="buttons primary xsmall">
Primary Button
</button>
</div>
<div>
<button class="buttons success small">
Secondary Button
</button>
</div>
<div>
<button class="buttons error medium">
Error Button
</button>
</div>
<div>
<button class="buttons warning large">
Warning Button
</button>
</div>
<div>
<button class="buttons info xlarge">
Info Button
</button>
</div>
<div>
<button class="buttons secondary large">
Success Button
</button>
</div>
</div>
</body>
</html>