Button Component

The Button component is a versatile element for creating styled buttons with functionalities like toggling, icon positioning, and HTML attribute support, enhancing interaction based on its configuration and state.

Usage

To import and use the Button component in your application, use the following code snippet:

import { Button, Color } from '@syncfusion/react-buttons';

<Button color={Color.Success}>Submit</Button>

import { Button, Color } from '@syncfusion/react-buttons';

<Button color={Color.Success}>Submit</Button>

Demos

Explore the demos of the React Button component. Refer to this page.

Props

The following table outlines the props for the Button component:

Name	Type	Default	Description
color	Color	Color.Primary	Specifies the Color style of the button. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
icon	node	-	Defines an icon for the button, which can either be a CSS class name for custom styling or an SVG element for rendering.
iconPosition	Position	Position.Left	Specifies the position of the icon relative to the button text. Options include placing the icon at the left, right, top, or bottom of the button content.
isLink	boolean	false	Styles the button to visually appear as a hyperlink. When true, the button text is underlined.
selected	boolean	false	Sets the initial selected state for a toggle button. When true, the button is initially rendered in a 'selected' or 'active' state, otherwise it's inactive.
size	Size	Size.Medium	Specifies the size style of the button. Options include 'Small', 'Medium' and 'Large'.
toggleable	boolean	false	Indicates whether the button functions as a toggle button. If true, the button can switch between active and inactive states each time it is clicked.
variant	Variant	Variant.Filled	Specifies the variant style of the button. Options include 'Outlined', 'Filled', and 'Standard'.