@wallnit-ui/button v0.1.0

Installation

To install a component run

$ npm install @wallnit-ui/button --save

Please import CSS styles via

@import '/path__to__node_modules/@wallnit-ui/button/dist/index.min.css

Usage

Simple Button:

Demo

import { Button } from '@wallnit-ui/button';

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    htmlAttributes={{
      id: 'button',
    }}
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Text Button</span>
  </Button>

  <Button
    type="button"
    variant="outlined"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Outlined Button</span>
  </Button>

  <Button
    type="button"
    variant="contained"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Contained Button</span>
  </Button>
</div>

Disabled Button:

Demo

import { Button } from '@wallnit-ui/button';

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Text Button</span>
  </Button>

  <Button
    type="button"
    variant="outlined"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Outlined Button</span>
  </Button>

  <Button
    type="button"
    variant="contained"
    isDisabled
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <span>Contained Button</span>
  </Button>
</div>

Icon Button:

Demo

import { Button } from '@wallnit-ui/button';

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
  <Button
    type="button"
    variant="text"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <>
      <i
        className="fa fa-star"
        style={{ marginRight: '7px' }}
      />
      <span>Text Button</span>
    </>
  </Button>
  <Button
    type="button"
    variant="outlined"
    icon="fa fa-star"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <>
      <i
        className="fa fa-star"
        style={{ marginRight: '7px' }}
      />
      <span>Outlined Button</span>
    </>
  </Button>
  <Button
    type="button"
    variant="contained"
    icon="fa fa-star"
    onClick={() => { window.alert('Button Was Clicked'); }}
  >
    <>
      <i
        className="fa fa-star"
        style={{ marginRight: '7px' }}
      />
      <span>Contained Button</span>
    </>
  </Button>
</div>