{"id":113772,"date":"2023-06-24T09:00:23","date_gmt":"2023-06-24T03:30:23","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=113772"},"modified":"2023-06-24T13:30:02","modified_gmt":"2023-06-24T08:00:02","slug":"button-in-react","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/button-in-react\/","title":{"rendered":"Button in React"},"content":{"rendered":"

Buttons are a fundamental part of any user interface, and React provides a range of options for implementing buttons in your application. In this article, we’ll explore the different types of buttons available in React and demonstrate how to implement them in your application.<\/p>\n

Types of React Buttons<\/h3>\n

1. Standard Button<\/h4>\n

The standard button is the most basic type of button available in React. It consists of a simple HTML button element that can be customized using CSS.<\/p>\n

<button>Click me<\/button><\/pre>\n
2. Button with Click Event Handler<\/h4>\n
Buttons are often used to trigger events in React applications. You can add a click event handler to a button to handle user clicks.<\/p>\n
function handleClick() {\r\nconsole.log('Button clicked');\r\n}\r\n\r\n<button onClick={handleClick}>Click me<\/button><\/pre>\n
3. Disabled Button<\/h4>\n
You can disable a button to prevent users from clicking it.<\/p>\n
<button disabled>Click me<\/button><\/pre>\n
4. Button with Icon<\/h4>\n
Buttons can also include icons to provide additional visual cues.<\/p>\n
import { FaUser } from 'react-icons\/fa';\r\n\r\n<button>\r\n<FaUser \/> Profile\r\n<\/button><\/pre>\n
5. Button with Loading State<\/h4>\n
When a button triggers an asynchronous operation, you can show a loading state to indicate that the operation is in progress.<\/p>\n
import { useState } from 'react';\r\nimport { FaSpinner } from 'react-icons\/fa';\r\n\r\nfunction MyButton() {\r\nconst [isLoading, setIsLoading] = useState(false);\r\n\r\nfunction handleClick() {\r\nsetIsLoading(true);\r\n\/\/ Perform async operation\r\nsetIsLoading(false);\r\n}\r\n\r\nreturn (\r\n<button onClick={handleClick} disabled={isLoading}>\r\n{isLoading ? <FaSpinner \/> : 'Click me'}\r\n<\/button>\r\n);\r\n}<\/pre>\n
In this example, we use the useState hook to create a state variable isLoading that tracks whether the button is in a loading state. We also define a click event handler that sets the isLoading state to true.<\/p>\n
Finally, we render the button with a disabled state when the button is in the loading state and display a spinner icon.<\/p>\n
Text, Contained, and Outlined Buttons in React<\/h3>\n
These are three common types of React buttons. Text buttons are usually used for secondary actions, whereas contained buttons are used for primary actions. Outlined buttons are used when there is a need for more contrast between the button and the background.<\/p>\n
\/\/ Text button\r\n<Button variant=\"text\">Text Button<\/Button>\r\n\r\n\/\/ Contained button\r\n<Button variant=\"contained\">Contained Button<\/Button>\r\n\r\n\/\/ Outlined button\r\n<Button variant=\"outlined\">Outlined Button<\/Button><\/pre>\n
In React-Bootstrap, you can use these buttons by using the variant prop:<\/p>\n
\/\/ Text button\r\n<Button variant=\"link\">Text Button<\/Button>\r\n\r\n\/\/ Contained button\r\n<Button variant=\"primary\">Contained Button<\/Button>\r\n\r\n\/\/ Outlined button\r\n<Button variant=\"outline-primary\">Outlined Button<\/Button><\/pre>\n
Output:<\/strong><\/p>\n
\"text<\/a><\/p>\n
Color, Size, and Upload Buttons:<\/h3>\n
Buttons can also be customized based on their color and size. In javatpoint and MUI, you can use the color and size props to set the button’s color and size:<\/p>\n
\/\/ Custom color button\r\n<Button color=\"secondary\">Custom Color Button<\/Button>\r\n\r\n\/\/ Custom size button\r\n<Button size=\"large\">Custom Size Button<\/Button>\r\n\r\n\/\/ Upload button\r\n<input type=\"file\" id=\"upload-button\" style={{ display: 'none' }} \/>\r\n<label htmlFor=\"upload-button\">\r\n<Button component=\"span\" variant=\"contained\" color=\"primary\">\r\nUpload\r\n<\/Button>\r\n<\/label><\/pre>\n
Output for size:<\/strong><\/p>\n
\"color\"<\/a><\/p>\n
Customization and Complex Buttons:<\/h3>\n
React buttons can be further customized by applying styles and adding icons or other elements. You can customize buttons by passing a style prop:<\/p>\n
\/\/ Custom style button\r\n<Button style={{ backgroundColor: 'green', color: 'white' }}>Custom Style Button<\/Button>\r\n\r\n\/\/ Complex button with icon\r\n<Button startIcon={<SaveIcon \/>}>Save<\/Button><\/pre>\n
In React-Bootstrap, you can customize buttons by adding a className prop and defining custom styles in CSS:<\/p>\n
\/\/ Custom style button\r\n<Button className=\"custom-button\">Custom Style Button<\/Button>\r\n\r\n\/\/ Complex button with icon\r\n<Button>\r\n<FontAwesomeIcon icon={faSave} \/>\r\nSave\r\n<\/Button><\/pre>\n
Output:<\/strong><\/p>\n
\"customization\"<\/a><\/p>\n
React Button API:<\/h3>\n
Finally, let’s take a look at the APIs provided by these button libraries. Javatpoint and MUI provide a range of APIs to customize and handle button events.<\/p>\n
\/\/ Handling button click event in javatpoint\r\nfunction handleClick() {\r\nalert('Button clicked!');\r\n}\r\n\r\n<Button onClick={handleClick}>Click me<\/Button>\r\n\r\n\/\/ Handling button click event in MUI\r\nfunction handleClick() {\r\nalert('Button clicked!');\r\n}\r\n\r\n<Button onClick={handleClick}>Click me<\/Button>\r\n\r\n\/\/ Handling button click event in React-Bootstrap\r\nfunction handleClick() {\r\nalert('Button clicked!');\r\n}\r\n\r\n<Button onClick={handleClick}>Click me<\/Button><\/pre>\n
In addition to onClick, javatpoint and MUI also provide APIs to handle other events such as onMouseEnter, onMouseLeave, and onFocus.<\/p>\n
Conclusion<\/h3>\n
React provides a range of options for implementing buttons in your application. Whether you need a basic button or a disabled button, everything can be implemented in your application.<\/p>\n","protected":false},"excerpt":{"rendered":"
Buttons are a fundamental part of any user interface, and React provides a range of options for implementing buttons in your application. In this article, we’ll explore the different types of buttons available in...<\/p>\n","protected":false},"author":581,"featured_media":114154,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27227],"tags":[27487],"class_list":["post-113772","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-tutorials","tag-button-in-react"],"yoast_head":"\nButton in React - DataFlair<\/title>\n<meta name=\"description\" content=\"React provides a range of options for implementing buttons in your application. learn about various types of buttons with examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/button-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Button in React - DataFlair\" \/>\n<meta property=\"og:description\" content=\"React provides a range of options for implementing buttons in your application. learn about various types of buttons with examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/button-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-24T03:30:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-24T08:00:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Button in React - DataFlair","description":"React provides a range of options for implementing buttons in your application. learn about various types of buttons with examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/button-in-react\/","og_locale":"en_US","og_type":"article","og_title":"Button in React - DataFlair","og_description":"React provides a range of options for implementing buttons in your application. learn about various types of buttons with examples.","og_url":"https:\/\/data-flair.training\/blogs\/button-in-react\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2023-06-24T03:30:23+00:00","article_modified_time":"2023-06-24T08:00:02+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp","type":"image\/webp"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"Button in React","datePublished":"2023-06-24T03:30:23+00:00","dateModified":"2023-06-24T08:00:02+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/"},"wordCount":449,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp","keywords":["Button in React"],"articleSection":["React Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/button-in-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/","url":"https:\/\/data-flair.training\/blogs\/button-in-react\/","name":"Button in React - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp","datePublished":"2023-06-24T03:30:23+00:00","dateModified":"2023-06-24T08:00:02+00:00","description":"React provides a range of options for implementing buttons in your application. learn about various types of buttons with examples.","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/button-in-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2023\/04\/button-in-react.webp","width":1200,"height":628,"caption":"button in react"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/button-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"React Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/react-tutorials\/"},{"@type":"ListItem","position":3,"name":"Button in React"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=113772"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113772\/revisions"}],"predecessor-version":[{"id":114160,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/113772\/revisions\/114160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/114154"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=113772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=113772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=113772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}