Buttons-svelte NPM

Buttons-Svelte

Buttons-Svelte is a library for Svelte, providing reusable button components.

Introduction

Buttons-Svelte is a powerful and flexible library for creating beautiful and interactive buttons in Svelte applications. It offers a wide range of customization options, allowing you to create buttons with various colors, sizes, padding,margins, events and transitions.

Features

Easy-to-use button components for Svelte applications.
Customize button color, text color, padding, and margins.
Choose from a variety of predefined button colors or use custom colors.
Adjust the font size and font family to match your design.
Lightweight and optimized for performance.

Installation

You can install the buttons-svelte library using npm:

npm install buttons-svelte

Usage

To use the button components in your Svelte project, import them from the library:

<script>
  import { Button } from "buttons-svelte";
</script>

<Button>Click Me</Button>
<Button btnColor="btn-red-500">Button</Button>
<Button btnColor="btn-green-600">Button</Button>
<Button btnColor="btn-blue-500">Button</Button>
<Button btnColor="#ff00ff">Button</Button>

Available Props

The Button component accepts the following props:

Props	Type	Default Type	Description
btnColor	string	" "	Custom CSS property to apply buttoncolor.
onClick	function	null	Event handler function for button click.
onMouseOver	function	null	Event handler function for mouse pointer is over the button.
onMouseOut	function	null	Event handler function for mouse pointer leaves the button.
textColor	string	" "	Custom CSS property for text color.
textSize	string	" "	Custom CSS property for text size.
padding	string	" "	Custom CSS property for padding.
margin	string	" "	Custom CSS property for margin.
border	string	" "	Custom CSS property for border.
borderRounded	string	" "	Custom CSS property for rounded border.
fontFamily	string	" "	Custom CSS property for font family.
fontWeight	string	" "	Custom CSS property for font weight.
<!--	transDuration	string	0.3s	Custom CSS property for transition duration.
transTimingFunction	string	ease	Custom CSS property for transition timing function.	-->

Examples

Basic Usage

<script>
  import { Button } from "buttons-svelte";
</script>

<Button>Click Me</Button>

Handling Click Events

<script>
  import { Button } from "buttons-svelte";

  const handleClick = () => {
    console.log("Button clicked!");
  };
</script>

<Button onclick={handleClick}>Click Me</Button>

Customizing Buttons

<script>
  import { Button } from "buttons-svelte";
</script>

<Button btnColor="btn-red-500" padding="p-6" textColor="green" textSize="text-2">Click Me</Button>
<Button btnColor="btn-blue-500" padding="p-8" textColor="white" textSize="text-4">Submit</Button>
<Button btnColor="#ff00ff" padding="p-10" textColor="black"textSize="text-6">Cancel</Button>

Margin

<script>
  import { Button } from "buttons-svelte";
</script>

<Button margin="5px">Click Me</Button>
<Button margin="10px 20px">Click Me</Button>
<Button margin="10px 40px 10px 40px">Click Me</Button>
<Button margin="m-2">Click Me</Button>

Padding

<script>
  import { Button } from "buttons-svelte";
</script>

<Button padding="10px">Click Me</Button>
<Button padding="10px 20px">Click Me</Button>
<Button padding="10px 40px 10px 40px">Click Me</Button>
<Button padding="p-2">Click Me</Button>