AllasButton

AllasButton is a simple React button component designed to be lightweight and easy to use.
There are a lot of button libraries out there, but many are either very hard to use or tied to large frameworks.

AllasButton is a React button component with customizable colors, icons, and effects. Perfect for modern web apps needing interactive and visually appealing buttons.

---

Installation

Install via npm:

npm install allas-button@latest

Usage:

Basic usage:

'use client';

import { AllasButton } from 'allas-button';

export default function App() {
  return (
    <AllasButton
      title="Click Me"
      onClick={() => console.log('Button clicked!')}
    />
  );
}

With custom colors:

<AllasButton
  title="Sign In"
  bgColor="#1c1c1c"
  bgHoverColor="#c867f5"
  textColor="#ebebeb"
  textHoverColor="#ffffff"
  effect="iconToText"
  onClick={() => console.log('Sign In clicked')}
/>

Using Bootstrap Icons

If you already have Bootstrap Icons installed, you can pass them as a string to the iconClass prop:

<AllasButton
  title="Sign In"
  iconClass="bi bi-box-arrow-in-left"
  onClick={() => console.log('Sign In clicked')}
/>

Button Effects

AllasButton supports a variety of visual effects. Pass one via the effect prop:

Effect	Description
none	No effect, default button behavior
iconToText	Transforms icon into text on hover
pulse	Button slightly pulses on hover
glow	Glows when hovered
pop	Pops out when hovered or clicked
float	Appears to float above the surface
elevate	Elevates with shadow on hover
highlightSweep	Sweep animation across the button
morph	Morphs shape slightly when hovered
press	Simulates a pressing effect

Props

Prop	Default	Description
title	—	Button text
className	''	Custom CSS class for the wrapper
iconClass	—	Icon class (e.g., Bootstrap Icons)
bgColor	#64b8fc	Background color
bgHoverColor	#2ce2a2	Background color on hover
textColor	#fff	Text color
textHoverColor	#fff	Text color on hover
effect	none	Visual effect applied
onClick	—	Click handler

When Using Build - WIP

Copy the .module.scss file into dist/src.