Changed value prop name to label for button label. Added sample buttons to home page

Client/src/Components/Button/index.jsx

@@ -27,18 +27,18 @@ const levelConfig = {
  * @property {boolean} [disabled] - Whether the button is disabled
  */
 
-const Button = ({ level, value, disabled }) => {
+const Button = ({ level, label, disabled }) => {
   const { variant, color } = levelConfig[level];
   return (
     <MuiButton variant={variant} color={color} disabled={disabled}>
-      {value}
+      {label}
     </MuiButton>
   );
 };
 
 Button.propTypes = {
   level: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
 };
 

Client/src/Pages/Home/index.jsx

@@ -8,13 +8,23 @@ const Home = () => {
     <>
       <div>Home</div>
       <DropdownTeamMember />
-      <div style={{ display: "flex", flexDirection: "flex-column" }}>
+      <div
+        style={{ display: "flex", flexDirection: "column", marginTop: "2rem" }}
+      >
+        <h4>Buttons</h4>
         <div>
           <Button level="primary" label="Primary" />
           <Button level="secondary" label="Secondary" />
           <Button level="tertiary" label="Tertiary" />
           <Button level="error" label="Error" />
         </div>
+        <h4>Disabled Buttons</h4>
+        <div>
+          <Button level="primary" label="Primary" disabled />
+          <Button level="secondary" label="Secondary" disabled />
+          <Button level="tertiary" label="Tertiary" disabled />
+          <Button level="error" label="Error" disabled />
+        </div>
       </div>
     </>
   );

Client/src/index.css

@@ -70,4 +70,4 @@ button:focus-visible {
   button {
     background-color: #f9f9f9;
   }
-}
+}