https://github.com/tanvir0604/react-action-button
A customizable button component for React with support for various styles, sizes, and social media icons. Includes built-in loading state and easy integration with Tailwind CSS. Perfect for use in forms, actions, and social login buttons with configurable variants such as primary, secondary, danger, and more.
https://github.com/tanvir0604/react-action-button
Last synced: 2 months ago
JSON representation
A customizable button component for React with support for various styles, sizes, and social media icons. Includes built-in loading state and easy integration with Tailwind CSS. Perfect for use in forms, actions, and social login buttons with configurable variants such as primary, secondary, danger, and more.
- Host: GitHub
- URL: https://github.com/tanvir0604/react-action-button
- Owner: tanvir0604
- License: mit
- Created: 2025-02-05T10:02:33.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-07T04:16:48.000Z (3 months ago)
- Last Synced: 2025-03-07T04:19:20.358Z (3 months ago)
- Language: TypeScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ActionButton Component
## Description
`ActionButton` is a customizable React button component that supports various button styles, social platform icons, loading states, and sizes. This button component can be used for both standard buttons and social media buttons (Facebook, Instagram, Google, etc.), with the ability to show loading states and custom icons.
## Installation
To install the `react-action-button` component, you can use either npm or yarn:
```bash
npm install react-action-button
```
or
```bash
pnpm add react-action-button
```
or
```bash
yarn add react-action-button
```
## Dependencies
- `react`
- `clsx`
- `tailwind-merge`
- `react-icons`
- `tailwind-css`
## Nextjs Integration for tailwindcss
Open the `tailwind.config.ts` file and add the following line to the `content` array:
```js
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+"./node_modules/react-action-button/dist/**/*.{js,ts,jsx,tsx}",
];
```
## Usage Example
```tsx
import React from "react";
import {
ActionButton,
ButtonVariants,
SocialVariants,
ButtonSizes,
} from "react-action-button";
export default function App() {
return (
alert("Clicked!")}
>
Primary Button
alert("Clicked!")}
>
Outline Button
alert("Facebook Button Clicked!")}
>
Facebook Login
Loading Button
Twitter Button
Loading LinkedIn Button
);
}
```
## Props
### `children` (React.ReactNode)
- **Type**: `React.ReactNode`
- **Required**: Yes
- **Description**: The content inside the button (text or any React element).
### `className` (string)
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS class names to be applied to the button.
### `platform` (SocialVariants)
- **Type**: `SocialVariants`
- **Default**: `SocialVariants.none`
- **Description**: Specifies the social platform associated with the button. It determines which social media icon will be displayed on the button.
- `none`: No social platform icon.
- `facebook`: Facebook icon.
- `twitter`: Twitter icon.
- `instagram`: Instagram icon.
- `linkedin`: LinkedIn icon.
- `github`: GitHub icon.
- `google`: Google icon.
### `variant` (ButtonVariants)
- **Type**: `ButtonVariants`
- **Default**: `ButtonVariants.default`
- **Description**: Defines the style variant of the button.
- `none`: No style.
- `default`: Default button style with a gray background.
- `primary`: Blue background with white text.
- `secondary`: Dark gray background with white text.
- `danger`: Red background with white text.
- `accent`: Pink background with white text.
- `ghost`: Transparent background with gray text and border.
- `link`: Text link button with blue text and underline.
### `outline` (Outline Design)
- **Type**: `Boolean`
- **Default**: `false`
- **Description**: Defines the outline style of the button.
- `true`: Outline button style.
- `false`: Default button style.
### `loading` (boolean)
- **Type**: `boolean`
- **Default**: `false`
- **Description**: If `true`, the button shows a loading state instead of the button's text. The `loadingText` and `loadingIcon` props control the text and icon displayed during loading.
### `type` (ButtonTypes)
- **Type**: `ButtonTypes`
- **Default**: `ButtonTypes.button`
- **Description**: Specifies the type of the button (`button`, `submit`, or `reset`).
### `size` (ButtonSizes)
- **Type**: `ButtonSizes`
- **Default**: `ButtonSizes.medium`
- **Description**: Specifies the size of the button.
- `small`: Smaller button with less padding and smaller text.
- `medium`: Default size button (standard padding and text size).
- `large`: Larger button with more padding and larger text.
### `loadingText` (string)
- **Type**: `string`
- **Default**: `Loading...`
- **Description**: Custom text to be shown when the button is in a loading state.
### `loadingIcon` (JSX.Element)
- **Type**: `JSX.Element`
- **Default**: Spinner icon.
- **Description**: Custom icon to be displayed during the loading state.
### `onClick` (function)
- **Type**: `() => void`
- **Required**: No
- **Description**: The function to be executed when the button is clicked.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.