react-responsive-button

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

Demo

Try react-responsive-button 🚀 on CodeSandbox

Note: the round black circle shown before the ripple is from GIPHY CAPTURE (the GIF app) to indicate a click.

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