Buttons

v.5.0.0

Installation

yarn

yarn add @mercell/button-react

pnpm

pnpm add @mercell/button-react

npm

npm install --save @mercell/button-react

The Button has necessary peerDependencies, please make sure that you have them in your project

"@carbon/icons-react": "^10.49.0",
"@mercell/tailwind": "^6.0.1",
"classnames": "^2.3.1",
"react": "^17.0.2" 

Usage

Depends on the need you should import

import { Button, ButtonProps } from '@mercell/button-react';

Live Editor

// You can play with code, with HTML tags and text as much as you want! render ( <div className="space-y-4 w-1/4"> <Button scheme='primary'>Primary</Button> <Button scheme='secondary'>Secondary</Button> <Button scheme='tertiary'>Tertiary</Button> <Button scheme='primary' disabled>Disabled</Button> <br/> <p>Icon button:</p> <Button scheme='secondary' iconSettings={{ Icon: Download32 }}>Icon Button</Button> <Button scheme='icon-no-hover' iconSettings={{ Icon: TrashCan32 }}>Icon Button</Button> <br/> <p>Small buttons:</p> <Button small scheme='primary'>Small</Button> <Button small scheme='secondary'>Small</Button> </div> )

// You can play with code, with HTML tags and text as much as you want!
    render (
        <div className="space-y-4 w-1/4">
            <Button scheme='primary'>Primary</Button>
            <Button scheme='secondary'>Secondary</Button>
            <Button scheme='tertiary'>Tertiary</Button>
            <Button scheme='primary' disabled>Disabled</Button>
            <br/>
            <p>Icon button:</p>
            <Button scheme='secondary' iconSettings={{ Icon: Download32 }}>Icon Button</Button>
            <Button scheme='icon-no-hover' iconSettings={{ Icon: TrashCan32 }}>Icon Button</Button>
            <br/>
            <p>Small buttons:</p>
            <Button small scheme='primary'>Small</Button>
            <Button small scheme='secondary'>Small</Button>
        </div>
    )

Result

Types, definitions, etc.

Types

ButtonProps

type ButtonProps = {
    scheme: HierarchyScheme;
    small?: boolean;
    iconSettings?: {
        Icon: CarbonIconType | React.FC;
        iconSide?: 'left' | 'right' | 'top' | 'bottom';
    };
} & JSX.IntrinsicElements['button'];

Name	Type	Default	Required	Description
scheme	HierarchyScheme (primary | secondary | tertiary | icon | icon-no-hover)	-	yes	Necessary for color
small	boolean	-	no	Styling for small buttons
iconSettings	{Icon: CarbonIconType | React.FC;iconSide?: 'left' | 'right' | 'top' | 'bottom';}	-	no	Icon setting

Name	Type	Default	Required	Description
Icon	CarbonIconType | React.FC	-	no	Icon in iconSettings
iconSide	left | right | top | bottom	-	no	Side of icon in iconSettings

Changelog

Change Log - @mercell/button-react

This log was last generated on Fri, 11 Nov 2022 09:18:57 GMT and should not be manually modified.

5.0.0

Fri, 11 Nov 2022 09:18:57 GMT

Breaking changes

• New styling approach - use only tailwind classes, add tailwind-merge library, merge icon button inside button-react

4.0.0

Thu, 15 Sep 2022 06:07:41 GMT

Breaking changes

• Migration to Tailwind3, React 18 and ViteJS from webpack.

3.1.2

Mon, 15 Aug 2022 12:37:25 GMT

Patches

• Added a forward of the ref

3.1.1

Thu, 30 Jun 2022 10:57:49 GMT

Patches

• Package.json refactor, add test suite, more tests soon

3.1.0

Tue, 14 Jun 2022 11:56:02 GMT

Minor changes

• Changes to align Tertiary button with new design changes

3.0.5

Mon, 30 May 2022 13:51:52 GMT

Patches

• optional property for smaller buttons

3.0.4

Fri, 08 Apr 2022 10:19:50 GMT

Patches

• Bump dependencies

3.0.3

Mon, 28 Feb 2022 12:45:49 GMT

Patches

• Dependency update

3.0.2

Mon, 28 Feb 2022 10:55:32 GMT

Patches

• Bump typescript

3.0.1

Wed, 26 Jan 2022 16:19:19 GMT

Patches

• Adding the same peerDependencies to devDependencies

3.0.0

Wed, 15 Dec 2021 22:20:34 GMT

Breaking changes

• Update to match figma design

2.1.6

Fri, 12 Nov 2021 13:08:30 GMT

Patches

• Add @mercell/tailwind to devDeps to be always up to date

2.1.5

Fri, 05 Nov 2021 11:10:13 GMT

Patches

• Bump peerDependency

2.1.4

Thu, 04 Nov 2021 10:10:16 GMT

Patches

• Tailwind type fix
• Revert tailwind version

2.1.3

Wed, 03 Nov 2021 15:28:42 GMT

Patches

• react types >=17

2.1.2

Wed, 27 Oct 2021 12:53:13 GMT

Patches

• Gitignore fix

2.1.1

Mon, 18 Oct 2021 07:16:21 GMT

Patches

• New local build process with webpack without storybook, add npmignore and update dependencies

2.1.0

Thu, 14 Oct 2021 06:44:43 GMT

Minor changes

• New development system with webpack and style inside one folder

2.0.9

Fri, 08 Oct 2021 13:04:50 GMT

Patches

• Delete local .npmignore and add global one

2.0.8

Tue, 05 Oct 2021 09:19:31 GMT

Patches

• Add npmignore

2.0.7

Tue, 14 Sep 2021 08:59:32 GMT

Patches

• Move tailwind to peer deps

2.0.6

Mon, 12 Jul 2021 10:50:09 GMT

Patches

• Updating dependencies
• Updating dependencies

2.0.5

Wed, 07 Jul 2021 09:56:37 GMT

Version update only

2.0.4

Wed, 24 Mar 2021 10:17:01 GMT

Patches

• Enabling eslint

2.0.3

Tue, 23 Mar 2021 13:40:42 GMT

Patches

• Adding esm module export

2.0.2

Wed, 17 Mar 2021 10:01:28 GMT

Patches

• Adding readme

2.0.1

Thu, 25 Feb 2021 07:02:16 GMT

Version update only

2.0.0

Wed, 24 Feb 2021 11:34:29 GMT

Breaking changes

• Now using tailwind schemes instead of ui-schemes. This means no more ghost or link buttons

1.0.9

Fri, 19 Feb 2021 09:41:17 GMT

Patches

• bump

1.0.8

Thu, 18 Feb 2021 14:52:58 GMT

Patches

• Export named

1.0.7

Thu, 11 Feb 2021 12:47:11 GMT

Patches

• Changing the classname interface

1.0.6

Fri, 05 Feb 2021 09:50:54 GMT

Patches

• target es5

1.0.5

Wed, 03 Feb 2021 07:57:36 GMT

Patches

• Tweaking a version number

1.0.4

Tue, 02 Feb 2021 09:58:24 GMT

Patches

• Version tweak

1.0.3

Thu, 28 Jan 2021 14:43:21 GMT

Patches

• Removed story exclusion

1.0.2

Wed, 27 Jan 2021 15:49:22 GMT

Patches

• Adding the initial package

Figma

Sometimes it can take some time until Figma will render component inside embed iframe. Try to click plus icon to 'reset' initial loader. (Works only in Chrome)

Click me to open figma in the new card