React Button - Getting Started
This tutorial shows how to add a Button to a page, apply styling, and configure its core features. As a result, you will create the following UI component:
Refer to the following sections for information on each configuration step. The full code is available in the GitHub repository.
Create a Button
Add DevExtreme to your React application and use the following code to create a Button:
- import 'devextreme/dist/css/dx.light.css';
- import { Button } from 'devextreme-react/button';
- function App() {
- return (
- <div className="App">
- <Button
- text="Click me!"
- />
- </div>
- );
- }
- export default App;
Handle the Click Event
To respond to user clicks, write an onClick handler. The example used in this tutorial displays a toast message:
- // ...
- import notify from 'devextreme/ui/notify';
- function showMessage() {
- notify("The button was clicked");
- }
- function App() {
- return (
- <div className="App">
- <Button ...
- onClick={showMessage}
- />
- </div>
- );
- }
- export default App;
Stylize the Button
You can use the type property to apply predefined color schemes to Buttons. You can also use the stylingMode property to customize the fill and borders. Refer to the Predefined Types demo for more information about these properties.
- // ...
- function App() {
- return (
- <div className="App">
- <Button ...
- stylingMode="outlined"
- type="success"
- />
- </div>
- );
- }
- export default App;
Add an Icon
Use the icon property to add a glyph to the button. You can load a custom icon or display one of the ready-to-use images from different image sources. The sample below shows how to use a glyph from the DevExtreme library:
- // ...
- function App() {
- return (
- <div className="App">
- <Button ...
- icon="comment"
- />
- </div>
- );
- }
- export default App;
For more information on this UI component, refer to the following resources:
If you have technical questions, please create a support ticket in the DevExpress Support Center.