react-responsive-button

0.2.1 • Public • Published

react-responsive-button

Simple, lightweight, dependency-free React button component with ripple effect when clicked and tapped

NPM

Demo

react-responsive-button default, styled and customized buttons
Try react-responsive-button 🚀 on CodeSandbox

react-responsive-button GIF demo with cursor indication
Note: the round black circle shown before the ripple is from GIPHY CAPTURE (the GIF app) to indicate a click.

react-responsive-button GIF demo without cursor indication
Note: this is the component's behaviour when clicked, where the cursor is set to be hidden from GIPHY CAPTURE (the GIF app).

Try react-responsive-button 🚀 on CodeSandbox

Install

npm install --save react-responsive-button

OR

yarn add react-responsive-button

Usage

import React from 'react';

import { Button } from 'react-responsive-button';
import 'react-responsive-button/dist/index.css';
import reactLogo from './assets/favicon.ico';

const App = () => {
  return (
    <div>
      <Button>Default Button</Button>
      <Button text>Text Button</Button>
      <Button bordered>Bordered Button</Button>
      <Button shape='rectangle'>Rectangular Button</Button>
      <Button shape='pill'>Pill-shaped Button</Button>
      <Button shape='ellipse'>Elliptical Button</Button>
      <Button disabled>Default Button (disabled)</Button>
      <Button href='#hi'>Button-liked Anchor</Button>
      <Button href='https://www.npmjs.com/package/react-responsive-button'>
        Button-liked Anchor
      </Button>
      <Button
        href='https://www.npmjs.com/package/react-responsive-button'
        target='_blank'
      >
        Button-liked Anchor
      </Button>
      <Button style={{ background: 'red' }}>Red Button</Button>
      <Button style={{ boxShadow: '0 0 1rem 0 rgba(0, 0, 0, 0.5)' }}>
        Button with shadow
      </Button>
      <Button style={{ border: '5px solid red' }}>Button with border</Button>
      <Button>
        <span role='img' aria-label='Heart'>
          ❤️
        </span>
      </Button>
      <Button>
        <img src={reactLogo} alt='React' />
      </Button>
    </div>
  );
};

export default App;

Try react-responsive-button 🚀 on CodeSandbox

Props

To customize the default button with black background, white text, no border and rounded corners (with border-radius of 0.5rem), use the following props:

Name Type Default Description
text Boolean false If true, the button will have white background and black text.
bordered Boolean false If true, the button will have white background, black text and 1px solid black border.
disabled Boolean false If true, the button will have faded background and faded text, and will not allowed to be clicked.
shape String null Shape of the button that is any of 'rectangle' or 'pill' or 'ellipse'.
href String null If specified, the button will be an anchor element, whilst still look like a button.
style Object null Inline style(s) to be placed on the button element.
children node or Array of nodes null DOM node(s) inside the button.
(any other props) Any null Any number of additional attribute(s) to be placed on the button element, e.g. target='_blank', aria-label='Open Modal'.

License

MIT © Yifan Ai

Package Sidebar

Install

npm i react-responsive-button

Weekly Downloads

8

Version

0.2.1

License

MIT

Unpacked Size

255 kB

Total Files

7

Last publish

Collaborators

  • yifanai