@pixelblock/buttons

@pixelblock/buttons

A customizable v component for React applications.

Installation

You can install the @pixelblock/buttons package via npm:

npm  install  @pixelblock/buttons

Or using yarn:

yarn  add  @pixelblock/buttons

Usage

Basic Example

import React from 'react';
import Button from '@pixelblock/buttons';

const App = () => (
  <div>
    <Button buttonStyle="basic" variant="primary">Primary Button</Button>
  </div>
);

export default App;

Props

Button Props

Prop Name	Type	Default	Description
buttonStyle	'basic' | 'slideBottom' | 'slideLeft' | 'slideRight' | 'slideUp' | 'circleGrowth' | 'rotate'	'basic'	Specifies the animation style of the button.
variant	'primary' | 'secondary' | 'outline' | 'ghost' | 'link'	'primary'	Specifies the variant (appearance) of the button.
onClick	() => void	undefined	Function to call when the button is clicked.
...props	React.ButtonHTMLAttributes<HTMLButtonElement>		Additional props are passed to the underlying button element.

Examples

{/* Basic Button */}
<Button>Basic Button</Button>

{/* Button with specified style and variant */}
<Button buttonStyle="basic" variant="primary">Primary Button</Button>
<Button buttonStyle="basic" variant="secondary">Secondary Button</Button>
<Button buttonStyle="basic" variant="outline">Outline Button</Button>
<Button buttonStyle="basic" variant="ghost">Ghost Button</Button>
<Button buttonStyle="basic" variant="link">Link Button</Button>

{/* Slide Bottom */}
<Button buttonStyle="slideBottom" variant="primary">Primary Button</Button>
<Button buttonStyle="slideBottom" variant="secondary">Secondary Button</Button>
<Button buttonStyle="slideBottom" variant="outline">Outline Button</Button>
<Button buttonStyle="slideBottom" variant="ghost">Ghost Button</Button>
<Button buttonStyle="slideBottom" variant="link">Link Button</Button>

{/*Slide Left*/}
<Button buttonStyle="slideLeft" variant="primary">Primary Button</Button>
<Button buttonStyle="slideLeft" variant="secondary">Secondary Button</Button>
<Button buttonStyle="slideLeft" variant="outline">Outline Button</Button>
<Button buttonStyle="slideLeft" variant="ghost">Ghost Button</Button>
<Button buttonStyle="slideLeft" variant="link">Link Button</Button>

{/*Slide Right*/}
<Button buttonStyle="slideRight" variant="primary">Primary Button</Button>
<Button buttonStyle="slideRight" variant="secondary">Secondary Button</Button>
<Button buttonStyle="slideRight" variant="outline">Outline Button</Button>
<Button buttonStyle="slideRight" variant="ghost">Ghost Button</Button>
<Button buttonStyle="slideRight" variant="link">Link Button</Button>

{/*Slide Up*/}
<Button buttonStyle="slideUp" variant="primary">Primary Button</Button>
<Button buttonStyle="slideUp" variant="secondary">Secondary Button</Button>  
<Button buttonStyle="slideUp" variant="outline">Outline Button</Button>  
<Button buttonStyle="slideUp" variant="ghost">Ghost Button</Button>  
<Button buttonStyle="slideUp" variant="link">Link Button</Button>

{/*Circle Growth*/}
<Button buttonStyle="circleGrowth" variant="primary">Primary Button</Button>
<Button buttonStyle="circleGrowth" variant="secondary">Secondary Button</Button>  
<Button buttonStyle="circleGrowth" variant="outline">Outline Button</Button>  
<Button buttonStyle="circleGrowth" variant="ghost">Ghost Button</Button>  
<Button buttonStyle="circleGrowth" variant="link">Link Button</Button>

{/*Rotate*/}
<Button buttonStyle="rotate" variant="primary">Primary Button</Button>  
<Button buttonStyle="rotate" variant="secondary">Secondary Button</Button>  
<Button buttonStyle="rotate" variant="outline">Outline Button</Button>  
<Button buttonStyle="rotate" variant="ghost">Ghost Button</Button>  
<Button buttonStyle="rotate" variant="link">Link Button</Button>

License

MIT