Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reusable Components: Button

See original GitHub issue



We need to create a reusable Button component. We should also be able to define children with any content. The button should receive two properties, onClick and theme.

<Button onClick={onClick}>Test</Button>

<Button onClick={onClick} theme="primary">
  <Image src={image} />
  <span>Some Text</span>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

linux-nerdcommented, Oct 7, 2018

And instead of onPress I would suggest onClick event. This is a more generic event. This is helpful whenever we have to use cloneElement to clone some component/node React.cloneElement(component, { onClick: this.handleClick }) we can use generic onClick instead of onPress as it will work for both <Button /> and <button></button>

Something like this -

<Button onClick={onPress} label="Ok" classes={classes} icon={<FontAwesomeIcon />} theme="primary" />

nitish24pcommented, Oct 7, 2018

@crysfel Instead should we have a generic button component which does

const Button = ({children,}) => {
  const classes = classNames(
   // other styles based on props
  return (
    <button {} className={classes}>


This way we neednt have a label prop, the children can be text, image, span, loader whatever? what say?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Build Reusable Components with Props in React
Let's demonstrate how props are helpful with a final example – but this time around, we'll create a reusable button with the help...
Read more >
Reusable Button component example in react js - CodeSandbox
Reusable Button component example in react js. 0. Embed Fork Create Sandbox Sign in. Sandbox Info ... Components. App.js. index.js. styles.css. package.json.
Read more >
Creating a reusable Button component with React and Tailwind
This tutorial covers the process of creating a reusable Button component with TailwindCSS and React.
Read more >
Building reusable components using React - ButterCMS
As you can now see, you have made a pretty reusable React Button component. You can use the same idea to build a...
Read more >
BigBinary Books - Reusable components
In React, a reusable component is a piece of UI that can be used in various parts of an application to build more...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found