Installation

A highly configurable React button component. Includes stunning default styles or style it to suit your own design system.

$ yarn add @emryui/react-button
# or
$ npm install @emryui/react-button

If you want to use the default styles (e.g. colors), you also need to install the @emryui/presets package:

$ yarn add @emryui/presets
# or
$ npm install @emryui/presets

tailwind.config.js

module.exports = {
  presets: [
    require("@emryui/presets"),
    // ...other presets
  ],
  content: ["./node_modules/@emryui/react-button/**/*.{js,ts,jsx,tsx,mdx}"],
  // ...other Tailwind CSS configuration
};

Usage

Import the Button component and use it in your React application

import { Button } from "@emryui/react-button";

// Example usage:
<Button size="md" variant="primary" onClick={handleClick}>
  Click me
</Button>

Props

| Prop | Type | Options | | ---------------- | --------------------------- | --------------------------------------------------------------------------------------------- | | size | ButtonSize | sm, md, lg, xl, 2xl | | children | ReactNode | N/A | | disabled | boolean | true, false | | type | string | submit, reset, button | | variant | ButtonVariant | primary, secondary, secondary color, tertiary, tertiary color, link, link color | | addClassNames | string | N/A | | removeClassNames | string | N/A | | className | string | N/A | | transition | ButtonTransitionSpeed | fast, subtle, slow, none | | destructive | boolean | true, false | | dot | boolean | true, false | | as | keyof JSX.IntrinsicElements | N/A | | headless | boolean | true, false | | icon | boolean | true, false |