@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

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