\n\n\nReact button components with WCAG 2 AA contrast ratio tested colors, light and dark theme options. Flexible & easily customized.\n\nUses a theme based on [System UI Theme Specification](https://system-ui.com/theme/) & can be overriden by passing in your own theme as a prop.\n\nIf you are using emotion, styles can also be overriden via [composition](https://emotion.sh/docs/composition).\n\n## Getting Started\n\nInstall.\n\n```sh\nnpm i -S @marinda/react-styled-buttons\n```\n\nImport the Button component into your app:\n\n```js\nimport { Button } from '@marinda/react-styled-buttons';\n```\n\nAdd Button to your render function.\n\n```js\n\n```\n\n## Demo\nExplore all the button themes, styles and sizes in the [Storybook](https://marinda.me/react-styled-buttons/?path=/story/components-button--primary).\n\n## Button props\n\nThese are the available props for the button component.\n\n### as\n\nAllows you to overwrite the element - by default it is rendered as a button element. This is useful if you need to use a routing Link component\n\n```js\n\n```\n\n### any html attribute\n\nAny html attribute can be passed as a prop and will be set as an attribute to the element.\n\n```js\n\n```\n\n### onClick or any react on event handler\n\n```js\n {\n /* your click handler */\n}}\nonMouseUp={() => {\n /* your mouse up handler */\n}}\n>\n```\n\n### variant\n\nButton variant - this will assign different theme styles for each variant. Options: primary(default), secondary, accent1, accent2, accent3, accent4, muted, highlight, gray.\n\n```js\n\n```\n\n### size\n\nThree sizes: large(default), medium, small.\n\n```js\n\n```\n\n### mode\n\nMode: light or dark.\n\n```js\n\n```\n\n### disabled\n\nSets button to disabled.\n\n```js\n\n```\n\n### \n\nDisables button animation on hover & click.\n\n```js\n\n```\n\nDisable color transforms on hover & click.\n\n```js\n\n```\n\n### theme\n\nThe Button component uses a theme [preset](https://github.com/mariiinda/tetris-theme-ui-preset) to set styles. Override the theme by passing a theme object, this will be merged with the Button's theme. Pass in the same [properties](https://github.com/mariiinda/tetris-theme-ui-preset/blob/master/src/json/index.json) as the inner theme.\n\n\n```js\n\n Custom theme button\n\n```\n\n## Styles\n\n### Compose your own styles\n If you are using [emotion](https://emotion.sh/), you can merge your own styles with existing styles ([composition](https://emotion.sh/docs/composition)) by passing in a [css prop](https://emotion.sh/docs/css-prop).\n\n```js\n\nAbout\n\n```","readmeFilename":"README.md"}
![\"\"](\"https://api.travis-ci.org/mariiinda/react-styled-buttons.svg?branch=master\")
\n \n \n ![\"\"](\"https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg\"){kind=icon}
\n \n