0.0.16 • Published 1 year ago

@plume-ui-react/button v0.0.16

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Button

This is a custom React button component that allows you to create buttons with various variants and styling options. You can use this button in your React web applications to enhance the user experience.

Installation

To use this component in your React project, follow these steps:

  1. Install the package using npm or yarn:

    npm install @plume-ui-react/button
    # Or
    yarn add @plume-ui-react/button
  2. Import the stylesheet into your root component file:

    import '@plume-ui-react/button/dist/index.css'
  3. Import the component in your JavaScript or TypeScript file:

    import { Button } from '@plume-ui-react/button'
  4. Use the component in your application:

    <Button>Button Text</Button>

Properties

This component accepts several properties to customize the appearance and behavior. Here are the available properties:

PropertyTypeDescription
busyTextstringThe text displayed on the button when it's in a busy (loading) state. By default, it shows "..."
childrenReactNodeThe content of the button, typically the text displayed on the button.
classNamestringAdditional CSS classes for the button.
disabledbooleanIndicates whether the button is disabled or not.
iconLeftReactNodeAn icon or component to be displayed to the left of the button text.
iconRightReactNodeAn icon or component to be displayed to the right of the button text.
isBusybooleanIndicates whether the button is in "busy" or loading mode.
labelstringAn alternative for children. You can use label instead of children for strings content.
shape'pill' \| 'rounded'The shape of the button, which can be "pill" or "rounded".
size'sm' \| 'md' \| 'lg'The size of the button, which can be "sm" (small), "md" (medium), or "lg" (large).
styleCSSPropertiesCustom styles for the button.
type'button' \| 'submit' \| 'reset'The button type, default is "button".
variant'solid' \| 'outline' \| 'link' \| 'icon' \| 'unstyled'The button variant, which can be "solid", "outline", "link", "icon" or "unstyled".

Usage Examples

Here are some examples of how you can use this button component in your project:

Basic Button

<Button label="Click Me!" />

Button with Icon on the Right

<Button iconRight={<RightIcon />}>Save</Button>

Busy (Loading) Button

<Button isBusy>Saving...</Button>

Outline Button with Custom Color Scheme

<Button variant="outline" colorScheme="#FF5733">
  Cancel
</Button>

Large Pill-shaped Button

<Button size="lg" shape="pill">
  Learn More
</Button>

Disabled Button

<Button disabled>Disabled</Button>

Button with Custom Styles and Classes

<Button style={{ background: 'purple', color: 'white' }} className="my-custom-button">
  Custom Button
</Button>

This is a versatile button component that allows you to create buttons with different styles and behaviors to suit the needs of your React web application. Have fun customizing your buttons!

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago