Naively Programmable Module
    Wondering what’s next for npm?Check out our public roadmap! »

    @hawk-ui/button

    3.0.0 • Public • Published

    Installation

    To install a component run

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

    Please import CSS styles via

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

    Usage

    Simple Button:

    Demo

    import Button from '@hawk-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 '@hawk-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 '@hawk-ui/button';
    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
      <Button
        type="button"
        variant="text"
        icon="fa fa-star"
        onClick={() => { window.alert('Button Was Clicked'); }}
      >
        <span>Text Button</span>
      </Button>
      <Button
        type="button"
        variant="outlined"
        icon="fa fa-star"
        onClick={() => { window.alert('Button Was Clicked'); }}
      >
        <span>Outlined Button</span>
      </Button>
      <Button
        type="button"
        variant="contained"
        icon="fa fa-star"
        onClick={() => { window.alert('Button Was Clicked'); }}
      >
        <span>Contained Button</span>
      </Button>
    </div>

    Install

    npm i @hawk-ui/button

    DownloadsWeekly Downloads

    358

    Version

    3.0.0

    License

    MIT

    Unpacked Size

    32.7 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar