Button

The Button component is a versatile and customizable element from the @brightcodeui/beta-ui library.

npm i @brightcodeui/beta-ui

Usage

Import the Button component in your React file:

import { Button } from '@brightcodeui/beta-ui';

Example:

<Button color="blue" size="sm">Blue</Button>
<Button color="red" size="md">Red</Button>
<Button color="success" size="lg">Green</Button>

Sizes

Customize the size of your buttons:

• sm (small)
• md (medium, default)
• lg (large)

Example:

<Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button>

Custom Styles

You can add custom Tailwind CSS classes to further customize your button:

<Button size="sm" className="rounded-md bg-orange-400 hover:bg-orange-500 text-white">
  Custom Orange
</Button>

<Button size="md" className="rounded-md bg-white text-black">
  Custom white
</Button>

Disabled State

Buttons can be disabled:

<Button disabled={true}>Disabled Button</Button>

Icon Support

The Button component likely supports icons:

import { IoArrowForwardOutline } from "react-icons/io5";


<Button color="white" size="md" fontWeight="semibold" className="flex items-center gap-3">
  Next <IoArrowForwardOutline className="ml-2" />
</Button>

API Reference

Prop	Type	Default	Description
color	'white' | 'red' | 'yellow' | 'black' | 'green'	'green'	Sets the color theme of the button
size	'sm' | 'md' | 'lg'	'md'	Determines the size of the button
disabled	boolean	false	If true, disables the button
className	string	''	Allows adding custom Tailwind CSS classes

Best Practices

• Use clear and concise text on buttons to describe the action they perform.
• Choose appropriate colors to convey the button's purpose (e.g., green for positive actions, red for destructive actions).
• Ensure sufficient spacing between buttons to prevent accidental clicks on touch devices.
• Use the disabled prop to indicate when a button action is not available, but provide a reason to the user (e.g., through a tooltip).

Customization

This documentation provides a comprehensive overview of the Button component from your @brightcodeui/beta-ui library. It covers installation, basic usage, available features (colors, sizes, etc), custom styling with Tailwind CSS, accessibility considerations, and best practices.