@precooked/react-button NPM

@precooked/react-button

@precooked/react-button is a versatile button component for React projects. It supports customizable colors, icons, shadows, and various size options.

Installation

npm install @precooked/react-button

Props

Prop	Type	Default	Description
`title`	`string`	required	The text to display inside the button.
`onClick`	`() => void`	required	Function to handle the button click.
`color`	`keyof colors \\| string`	`'primary'`	The background color of the button (or the text color if `type` is not solid).
`borderRadius`	`number`	`4`	The border-radius of the button.
`type`	`"clear" \| "outline" \| "solid"`	`'solid'`	The button style type.
`disabled`	`boolean`	`false`	Disable the button when true.
`startIcon`	`string`	`undefined`	Icon to display at the start of the button.
`startIconPaths`	`string[]`	`undefined`	Custom SVG paths for the start icon.
`startIconSize`	`number`	`undefined`	Custom size for the start icon.
`endIcon`	`string`	`undefined`	Icon to display at the end of the button.
`endIconPaths`	`string[]`	`undefined`	Custom SVG paths for the end icon.
`endIconSize`	`number`	`undefined`	Custom size for the end icon.
`hasShadow`	`boolean`	`true`	Whether the button has a shadow or not.
`styles`	`React.CSSProperties`	`undefined`	Custom styles for the button container.
`titleStyles`	`React.CSSProperties`	`undefined`	Custom styles for the title text.
`size`	`"xs" \\| "sm" \\| "md" \\| "lg" \\| "xl"`	`'md'`	The size of the button, affecting padding and font-size.

Example Usage

import React from 'react';
import Button from '@precooked/react-button';

const MyComponent = () => (
  <Button 
    title="Click Me" 
    onClick={() => alert('Button clicked!')} 
    color="primary"
    type="solid"
    startIcon="home"
    endIcon="arrow-right"
    size="lg"
  />
);

export default MyComponent;