UNPKG

woi-react-components

Version:

This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &

35 lines (31 loc) • 4.43 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# WOI Parallelogram Button Component WOI parallelogram button component is a reusable React component for creating interactive buttons in your web application. ## Props WOI Parallelogram Button component accepts the following props: - `text` (string): The content to be displayed inside the button. This is the text that appears on the button. - `textColor` (string): The text color of the button's text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `hoverTextColor` (string): The text color of the button when the mouse pointer hovers over it. This allows you to change the text color on hover. - `fontSize` (number): The text size or font size of the button's text. It determines how large or small the text appears. - `fontWeight` (number): The font weight of the button's text. It controls the thickness or boldness of the text characters. - `width` (number): The width of the button, specified as a numerical value (e.g., pixels) or as a percentage of its container's width. - `height` (number): The height of the button, specified as a numerical value (e.g., pixels) or as a percentage of its container's height. - `borderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. - `textTransform` (string): The transformation applied to the button's text, such as "uppercase," "lowercase," or "capitalize." It controls the capitalization of the text. - `backgroundColor` (string): The background color of the button. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color. - `hoverBackgroundColor` (string): The background color of the button when the mouse pointer hovers over it. This allows you to change the background color on hover. - `borderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)). - `borderThickness` (string): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage. - `loader` (boolean): A boolean flag that determines whether the button is in a loading state. When set to true, the button is not interactive but in loading state. - `loaderColor` (string): The text color of the button when the mouse pointer hovers over it. This allows you to change the text color on hover. - `openLink` (string): A URL or link that the button should navigate to when clicked. This prop is used when the button acts as a link to another page or resource. - `openLinkInNewTab` (boolean): A state that checks the link should in new window or in the same window. - `clickFunction` (function): A callback function or action that should be executed when the button is clicked. This prop is used to define the behavior of the button when clicked. - `prefixIcon` (string): An icon or image that appears before the button's text. It can be specified as a path to an icon file or a CSS class for an icon font. - `suffixIcon` (string): An icon or image that appears after the button's text. It can be specified as a path to an icon file or a CSS class for an icon font. - `gradientDirection` (string): The direction of a gradient applied to the button's background. Common values include "top," "left," "right," etc. - `gradientColors` (string[]): An array of CSS color values representing the colors used in a gradient background for the button. The order of colors defines the gradient's transition. - `hoverGradientDirection` (string): The direction of a gradient applied to the button's background on hover effect. Common values include "top," "left," "right," etc. - `hoverGradientColors` (string[]): An array of CSS color values representing the colors used in a gradient background for the button on hover effect. The order of colors defines the gradient's transition. - `isDisabled` (boolean): A boolean flag that determines whether the button is in a disabled state. When set to true, the button is not clickable or interactive. - `skewType` (string): Set the text alignment for the element. - `skew` (number): Set the value for transform skew property the element.