AlertPills
This is a guideline for you on how to create you first product in your store
size 24
size 32
size 40
size 48
React js
import * as React from 'react';
import Toggle from 'vestarplus/Toggle';
export default function BasicTogglefunction() {
const [toggleState, setToggleState] = useState(false);
const handleToggle = () => {
setToggleState(!toggleState);
};
return (
//different sizes for different toggle buttons 24,32,40,48
<Toggle size={40} checked={toggleState} onToggle={handleToggle} />
<Toggle size={40} checked={toggleState} onToggle={handleToggle} disabled/>
);
}
HTMLCSSJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Component</title>
</head>
<body>
<label class="toggleContainer" id="toggleContainer"
style="--container-width: 48px; --container-height: 27.429px;">
<input type="checkbox" class="toggleInput" checked="checked" id="toggleCheckbox">
<div class="toggleCircle"></div>
</label>
</body>
</html>