Button

Below is the full output of the Button component across all variants and sizes.

“Its Important to install the packages & Dependencies to use can intall using npm install zure-ui and also paste code maunally For both React & Next Js “

1. Variants

These define the intent and visual weight of the button.

Preview

2. Sizes

Buttons can be scaled to fit different UI densities.

Preview

Testing the to prop (Link) and the custom bg/color overrides.

Important Note “If you are using to in React you need no install react-router-dom”

Preview

Navigate to Guide

Props

Prop	Type	Default	Description
`children`	ReactNode	—	Content displayed inside the button (text, icons, or elements).
`variant`	string	`primary`	Visual style of the button. Values: `primary`, `secondary`, `outline`, `ghost`
`size`	string	`md`	Controls button size. Values: `sm`, `md`, `lg`
`disabled`	boolean	`false`	Disables the button and prevents interaction.
`loading`	boolean	`false`	Shows loading state and disables the button.
`className`	string	`""`	Adds custom CSS classes to the button.
`to`	string	—	Converts the button into a navigation link.
`bg`	string	—	Custom background color (hex, rgb, gradient).
`color`	string	—	Custom text color.
`style`	object	—	Inline styles for custom design.
`...props`	object	—	Any valid native HTML button attributes.

Installation

You can Integrate Zure UI By 2 ways npm install zure-ui Or by Manually creating folder , files & paste the given code It Totally depends on your workflow.

NPM

Step 1: Create a React App

Open your terminal and run the following command to create a new React app:


npx create-react-app my-app

Step 2: Navigate to Your Project Directory

After creating your project, navigate to your project directory:


cd my-app

Step 3: Install the Package

Run the following command in your project root to add the library as a dependency.


npm install zure-ui

Step 4: Start Building

You can now import any component directly into your React files.

App.jsx


import { Button } from 'zure-ui';
 
function App() {
  return <Button>Hello From Saurav Zure</Button>;
}

Manual

Step 1: Create a Components Directory

Ensure you have a dedicated folder for UI components (e.g., src/components/ui).

Step 2: Create the Component Folder

For each component you want to use, create a new folder named after the component.

- - - - Button.jsx
      - button.module.css
      - index.js
- App.js

Step 3: Add the Three Core Files

Inside that new folder, create these three files and paste the code provided in the component’s documentation:

Button.jsx (The Logic)
button.module.css (The Styles)
index.js (The Export)

Step 4: Paste in Button.jsx

React JS

Button.jsx


import React from "react";
import { Link } from "react-router-dom";
import styles from "./button.module.css";
 
export const Button = ({
  children,
  variant = "primary",
  size = "md",
  disabled = false,
  loading = false,
  className = "",
  to,
  bg,
  color,
  style,
  ...props
}) => {
  const isLink = Boolean(to);
 
  const customStyles = {
    ...style,
    backgroundColor: bg,
    color: color,
  };
 
  const combinedClasses = `${styles.button} ${styles[variant]} ${styles[size]} ${className}`;
 
  // If it's a link → React Router Link, else → button
  if (isLink) {
    return (
      <Link
        to={to}
        className={combinedClasses}
        style={customStyles}
        {...props}
      >
        {loading ? "Loading..." : children}
      </Link>
    );
  }
 
  return (
    <button
      className={combinedClasses}
      disabled={disabled || loading}
      style={customStyles}
      {...props}
    >
      {loading ? "Loading..." : children}
    </button>
  );
};

Step 5: Paste in button.module.css

button.module.css


 /* Base styles - applicable to both <button> and <a> tags */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
text-decoration: none; /* Ensures Link looks like a button */
line-height: 1;
white-space: nowrap;
outline: none;
}
 
/* Variants */
.primary {
background-color: black;
color: white;
}
 
.primary:hover:not(:disabled) {
background-color: #333;
}
 
.outline {
background-color: transparent;
border: 1px solid black;
color: black;
}
 
.outline:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.05);
}
 
.ghost {
background-color: transparent;
color: black;
}
 
.ghost:hover:not(:disabled) {
background-color: rgba(0, 0, 0, 0.1);
}
 
/* Sizes */
.sm {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
height: 32px;
}
 
.md {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
height: 40px;
}
 
.lg {
padding: 0.8rem 1.6rem;
font-size: 1rem;
height: 48px;
}
 
/* States */
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none; /* Prevents hover effects on links when disabled */
}
 
.button:focus-visible {
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}

Step 6: Paste in index.js

index.js


export { Button } from "./Button";

Step 7: Local Usage

Import the component using your local path:

App.jsx


import { Button } from './components/Button';

Step 8: Usage

Use the component

App.jsx


<Button variant="primary">Primary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="primary" loading>Loading State</Button>
<Button variant="primary" disabled>Disabled</Button>

Button

1. Variants

Preview

Use

2. Sizes

Preview

Use

3. Navigation & Custom Colors

Preview

Use

Props

Installation

NPM

NPM

Step 1: Create a React App

Step 2: Navigate to Your Project Directory

Step 3: Install the Package

Step 4: Start Building

Manual

Manual

Step 1: Create a Components Directory

Step 2: Create the Component Folder

Step 3: Add the Three Core Files

Step 4: Paste in Button.jsx

React JS

Next JS

Step 5: Paste in button.module.css

Step 6: Paste in index.js

Step 7: Local Usage

Step 8: Usage