Button

Overview

Button is required for many sections.

note: Users react-router-dom ↗ for redirecting to other page.

preview

Normal Buttons

Link Button

Disabled Buttons

Use disabled to disable Buttons.

Link Button

Installation

button Button

Create a Folder: Make a folder named button inside sectioner/ui folder.
Create Component: Inside button, create a file called Button.jsx.
Add JSX: Copy the provided JSX code into Button.jsx.
Create CSS File: In the same folder, create a file named Button.module.css.
Add CSS: Copy the provided CSS code into Button.module.css.
Use Component: Import and use Button in your project where needed.

Button.jsx

import React from "react";
import styles from "./Button.module.css";
import { Link } from "react-router-dom";
 
export const Button = ({
  children,
  classname,
  variant = "default",
  size = "default",
  disabled = false,
  to,
  ...props
}) => {
  const stylesVariantMap = {
    default: styles.default,
    outline: styles.outline,
    ghost: styles.ghost,
    danger: styles.danger,
    success: styles.success,
  };
  const stylesSizeMap = {
    default: styles.defaultSize,
    icon: styles.iconSize,
  };
 
  const classNames = `${styles.button} ${stylesSizeMap[size]} ${
    stylesVariantMap[variant]
  } ${classname} ${disabled && "disabled"}`;
 
  if (to) {
    return (
      <Link
        to={to}
        tabIndex={disabled ? "-1" : "false"}
        className={classNames}
        {...props}
      >
        {children}
      </Link>
    );
  }
 
  return (
    <button disabled={disabled} className={classNames} {...props}>
      {children}
    </button>
  );
};

Installation

variants: default,outline,ghost,danger,success
sizes: default,icon

Navbar Input