React Styled Buttons

React button components with WCAG 2 AA contrast ratio tested colors, light and dark theme options. Flexible & easily customized.

Uses a theme based on System UI Theme Specification & can be overriden by passing in your own theme as a prop.

If you are using emotion, styles can also be overriden via composition.

Getting Started

Install.

npm i -S @cyberhippo/react-styled-buttons

Import the Button component into your app:

import { Button } from '@cyberhippo/react-styled-buttons';

Add Button to your render function.

<Button>Click Me!</Button>

Demo

Explore all the button themes, styles and sizes in the Storybook.

Button props

These are the available props for the button component.

as

Allows 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

<Button as={Link} to="/about">
  About
</Button>

any html attribute

Any html attribute can be passed as a prop and will be set as an attribute to the element.

<Button tabindex="-1">
  About
</Button>

onClick or any react on event handler

<Button
onClick={() => {
    /* your click handler */
}}
onMouseUp={() => {
    /* your mouse up handler */
}}
>

variant

Button variant - this will assign different theme styles for each variant. Options: primary(default), secondary, accent1, accent2, accent3, accent4, muted, highlight, gray.

<Button variant="secondary">
  About
</Button>

size

Three sizes: large(default), medium, small.

<Button size="small">
  About
</Button>

mode

Mode: light or dark.

<Button mode="dark">
  About
</Button>

disabled

Sets button to disabled.

<Button disabled>
  About
</Button>

Disables button animation on hover & click.

<Button disableAnimation>
  About
</Button>

Disable color transforms on hover & click.

<Button disableColorTransforms>
  About
</Button>

theme

The Button component uses a theme 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 as the inner theme.

<Button
  mode={mode}
  theme={{
    colors: {
      background: "#f8f0fc",
      primary: "#862E9C",
      modes: {
        dark: {
          background: "#333",
          primary: "#e599f7"
        }
      }
    },
    shadows: {
      default: "0 .5rem 1rem rebeccapurple"
    }
  }}
>
  Custom theme button
</Button>

Styles

Compose your own styles

If you are using emotion, you can merge your own styles with existing styles (composition) by passing in a css prop.

<Button
css={css`
    background: red;
    &:hover {
    background: green;
    }
`}
>
About
</Button>