@precooked/react-icon-button NPM

@precooked/react-icon-button

@precooked/react-icon-button is a versatile icon button component for React projects. It supports different button sizes, colors, and types, with customizable icons and shadows.

Installation

npm install @precooked/react-icon-button

Props

Prop	Type	Default	Description
`onClick`	`() => void`	required	Function to handle the button click.
`color`	`keyof colors \\| string`	`'primary'`	Background color of the button when `type` is `solid`; or text color for other types.
`borderRadius`	`number`	`22`	Border radius of the button in pixels.
`type`	`"clear" \\| "outline" \\| "solid"`	`'solid'`	Button style type.
`disabled`	`boolean`	`false`	Disables the button when true.
`icon`	`string`	`undefined`	Icon name to display inside the button.
`iconPaths`	`any[]`	`undefined`	Custom SVG paths for the icon.
`iconSize`	`number`	`undefined`	Size of the icon in pixels, defaulting to the size based on `size`.
`hasShadow`	`boolean`	`true`	Whether the button has a shadow.
`styles`	`React.CSSProperties`	`undefined`	Custom styles for the button.
`size`	`"xs" \\| "sm" \\| "md" \\| "lg" \\| "xl"`	`'md'`	Size of the button, affecting its dimensions and icon size.

Example Usage

import React from 'react';
import IconButton from '@precooked/react-icon-button';

const MyComponent = () => (
    <div>
        <IconButton 
            onClick={() => alert('Button clicked!')} 
            color="primary" 
            icon="home" 
            size="lg" 
            type="solid" 
            hasShadow={true} 
        />
        <IconButton 
            onClick={() => alert('Another button clicked!')} 
            color="#ff5733" 
            icon="settings" 
            size="sm" 
            type="outline" 
            borderRadius={10} 
            hasShadow={false} 
        />
    </div>
);

export default MyComponent;