@plume-ui-react/button

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:

Property	Type	Description
busyText	string	The text displayed on the button when it's in a busy (loading) state. By default, it shows "..."
children	ReactNode	The content of the button, typically the text displayed on the button.
className	string	Additional CSS classes for the button.
disabled	boolean	Indicates whether the button is disabled or not.
iconLeft	ReactNode	An icon or component to be displayed to the left of the button text.
iconRight	ReactNode	An icon or component to be displayed to the right of the button text.
isBusy	boolean	Indicates whether the button is in "busy" or loading mode.
label	string	An 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).
style	CSSProperties	Custom 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!