Emry UI - React Button
Supercharge your frontend development
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
|