# custom-themed-button
> A buttons package that works best with styled-components. so set up your styled-components theme if you haven't already and keep on reading!
Latest version **1.0.5** (published 2021-06-29) · MIT license · 0 weekly downloads
## Install
```sh
npm install custom-themed-button
pnpm add custom-themed-button
yarn add custom-themed-button
bun add custom-themed-button
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-06-29 |
| First published | 2021-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 62.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | David Sharki |
| Maintainers | knowledge-reigns-supreme |
## Links
- npm: https://www.npmjs.com/package/custom-themed-button
- Repository: https://github.com/knowledgeReignsSupreme/custom-themed-button
- Homepage: https://github.com/knowledgeReignsSupreme/custom-themed-button#readme
- Issues: https://github.com/knowledgeReignsSupreme/custom-themed-button/issues
- npm.io page: https://npm.io/package/custom-themed-button
## Recent versions
- 1.0.5 (latest) — 2021-06-29
- 1.0.4 — 2021-06-28
- 1.0.3 — 2021-06-28
- 1.0.2 — 2021-06-28
- 1.0.1 — 2021-06-28
- 1.0.0 — 2021-06-28
- 0.1.0 — 2021-06-28
## README
# Custom Themed Button
A buttons package that works best with styled-components. so set up your styled-components theme if you haven't already and keep on reading!
CodeSandbox playground: https://codesandbox.io/s/custom-themed-button-sandbox-r6ei7?file=/src/App.tsx
```shell
npm i custom-themed-button
```
```js
// Set up your styled-components theme
export const theme = {
main: '#39A2DB',
mainDark: '#053742',
mainLight: '#A2DBFA',
sec: '#FFA900',
secDark: '#E2703A',
secLight: '#E6DD3B',
error: '#D44000',
};
// Wrap your app with the and pass your theme
import { ThemeProvider } from 'styled-components';
function App() {
return ...App Children;
}
// The Button Components wil be available anywhere in your app!
import { Button } from 'custom-themed-button';
function Example() {
return (
);
}
```
Note that when we pass color props to the Button component, we use the same names as in the theme object.
## Let's review the available props:
### Required props:
| prop | value | Description | default | required? |
| ------- | ------ | ------------------------------------------------------------------------------------------ | ------- | --------- |
| text | string | Button text. | none | no |
| color | string | Font color. The name of the color as written in the theme object. e.g color='main' | none | yes |
| bgColor | string | Background color. The name of the color as written in the theme object. e.g bgColor='main' | none | yes |
### Styling Props:
| prop | value | Description | default | required? |
| ------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------ | --------- | --------- |
| size | 'xs', 'sm', 'md', 'lg', 'xl' | Background color. The name of the color as written in the theme object. | 'md' | no |
| icon | any | Icon to display in the button or next to the text if provided. | none | no |
| iconSize | string | The font-size of the icon, any unit is acceptable. e.g: iconSize='2rem' or iconSize='20px'. | 'initial' | no |
| iconPosition | 'left', 'right' | The position of the icon, relatively to the text if provided. | 'left' | no |
| shape | 'pill', 'circle' | The shape of the button. | regular | no |
| showShadow | boolean | Determines whether the button should have a shadow or not. | true | no |
| showBorder | boolean | Determines whether the button should have a border or not. | true | no |
| borderWidth | string | The width of the border if exists, works with any unit. e.g: borderWidth='2rem' or borderWidth='20px'. | '1px' | no |
| borderColor | string | Border color. The name of the color as written in the theme object. e.g borderColor='secDark' | 'bgColor' | no |
| fontWeight | string | Font weight of the text. Accepts any valid CSS value. | 'initial' | no |
### Animation/Hover Props:
| prop | value | Description | default | required? |
| ------------ | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | --------- |
| hoverColor | string | Font color on hover. The name of the color as written in the theme object . e.g hoverColor='sec' | color | no |
| hoverEffect | 'expand', 'lowerOpacity', '2dClick', 'slideFormLeft', 'slideFromRight' | Button animation on hover | 'expand'. | no |
| slideBgColor | string | if a slide hoverEffect was selected, you can specify the background color of the slider. Should be written the same as in the theme object. | inverses 'color'&'bgColor' | no |
### Button Element Props:
| prop | value | Description | default | required? |
| ----------- | -------- | -------------------------------------------------------- | ------- | --------- |
| handleClick | function | Works the same as onClick. | none | no |
| disabled | boolean | Determines whether the button should be disabled or not. | false | no |
#### Hit me up at david17895@gmail.com if you have any questions.
Also available on LinkedIn
---
_Source: https://npm.io/package/custom-themed-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._