react-reusable-button-library v1.2.9

Button

react-reusable-button-library is a performant built, highly customizable, production-ready React Component that renders an animated set of 3D UI buttons.

Documentation

Documentations

Installation

Install my-library with npm

npm i react-reusable-button-library

Import

import { Button } from 'react-reusable-button-library';

Styling with plain CSS

import { Button } from 'react-reusable-button-library';

function Button() { return <Button>Button</Button>; }

Accessibility

• Button has role of button.

• When Button has focus, Enter or Space activates it.

Button Sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

<Stack row wrap >
    <Button size="xs">Button</Button>
    <Button size="sm">Button</Button>
    <Button size="md">Button</Button>
    <Button size="lg">Button</Button>
</Stack>

Button Variants

Use the variant prop to change the visual style of the Button. You can set the value to  outlined.

<Stack row >
    <Button>Button</Button>
    <Button variant="outlined">Button</Button>
</Stack>

Button Colors

Use the colorScheme prop to change the color scheme of the Button. You can set the value to any of the color scales from your design system,like gray, red, blue, or your custom color.

<Stack spacing={2} row wrap >
        <Button>Button</Button>
        <Button colorScheme="red" >Button</Button>
        <Button colorScheme="yellow" >Button</Button>
        <Button colorScheme="green" >Button</Button>
        <Button colorScheme="pink" >Button</Button>
        <Button colorScheme="blue" >Button</Button>
        <Button colorScheme="cyan" >Button</Button>
        <Button colorScheme="orange" >Button</Button>
        <Button colorScheme="purple" >Button</Button>
        <Button colorScheme="teal" >Button</Button>
        <Button colorScheme="linkdin" >Button</Button>
        <Button colorScheme="facebook" >Button</Button>
        <Button colorScheme="whatsapp" >Button</Button>
        <Button colorScheme="twitter" >Button</Button>
        <Button colorScheme="telegram" >Button</Button>
</Stack>

Social Buttons

We've included the colors for common social media platforms, and you can simply use their buttons via the colorScheme prop.

<Stack row >
  <Button colorScheme="facebook">
    Facebook
  </Button>

  <Button colorScheme="twitter"
    Twitter
  </Button>

  <Button colorScheme="telegram"
    Telegram
   </Button>

  <Button colorScheme="whatsapp">
    Whatsapp
   </Button>
</Stack>

Button with Icons

We've included the left and right icons button.

<Stack>
    <Button leftIcon={<IoMdArrowBack />}Button></Button>
    <Button rightIcon={<IoMdArrowForward />} >Button</Button>
</Stack>

Props

Button Props

Buttoncomposes the Button component, so you can pass all its props. These are props specific to the Buttoncomponent:

colorScheme

Type

"gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"telegram"

size

Type

"lg" | "md" | "sm" | "xs"

Default

"md"

variant

Type

"outline" | "solid"

Default

"solid"

License

MIT