Base Component

Using a Base Component

There is tremendous amount of flexibility when it comes to composition in React – since components are essentially just functions. By changing style details in a component to props we can make it more reusable.

The color and backgroundColor properties have been moved up to the component’s props. Additionally, we’ve added a big prop to adjust the padding top and bottom.

const Button = ({
  color = colors.white,
  backgroundColor =,
  }) => {
  const sx = {
    fontFamily: 'inherit',
    fontSize: 'inherit',
    fontWeight: bold,
    textDecoration: 'none',
    display: 'inline-block',
    margin: 0,
    paddingTop: big ? space[2] : space[1],
    paddingBottom: big ? space[2] : space[1],
    paddingLeft: space[2],
    paddingRight: space[2],
    border: 0,
    WebkitAppearance: 'none',
    MozAppearance: 'none'

  return (
    <button {...props} style={sx}/>


const Button = () => (
      Blue Button
    <Button big backgroundColor={}>
      Big Red Button

// By adjusting the props API of the base Button component,
// an entire set of button styles can be created.
const ButtonBig = (props) => <Button {...props} big/>;
const ButtonGreen = (props) => <Button {...props} backgroundColor={}/>;
const ButtonRed = (props) => <Button {...props} backgroundColor={}/>;
const ButtonOutline = (props) => <Button {...props} outline/>;

results matching ""

    No results matching ""