React Button

The React Button component is a versatile user interface element designed for creating interactive buttons in web applications.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Button component to the project.

Installing Syncfusion® React packages

To use the Button component, install the @syncfusion/react-buttons package:

npm install @syncfusion/react-buttons

Adding CSS reference

Import the Button component’s required CSS references in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

Adding Button component

To include the Button component in your application, import the Button from the @syncfusion/react-buttons package in App.tsx.

import { Button } from "@syncfusion/react-buttons";

Add the Button component in application as shown in below code example.

import { Button } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
  return (
    <div className="component-section">
      <Button>Default Button</Button>     
    </div>
  );
};

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates the Button component is rendered with the given text.

Variants

The Button component has three distinct variants : standard, outlined and filled.

Filled Button

The Filled buttons are key user interface elements that stand out visually through raised effects and solid fill colors. When the disabled attribute is set, the button cannot change its state.

Standard Button

The Standard buttons are subtle user interface elements that blend into their surroundings without elevation effects and typically use transparent or minimal fill colors.

Outlined Button

The Outlined buttons have a bordered edge and no fill, with a transparent center and a bordered outline.

Button sizes

The Button component offers flexible size options, allowing developers to create consistent sizing across interfaces, adapt to spatial constraints, and emphasize importance while supporting accessibility.

Color

The Button component offers different styles to represent various colors like Primary, Secondary, Warning, Success, Error, and Info using color property.

Icon and label

The icon and iconPosition define the icon and its place, enhancing recognition and accessibility, while keeping a cohesive design.

SVG icon

Integrating SVG icons within button components ensures high-quality visuals that remain consistent across various sizes and resolutions.

Icon sizes

The size property allows you to automatically apply a standard size, with the option to customize it according to your design needs.

Icon colors

Icon color schemes provide visual cues to convey icon meanings, enabling you to quickly comprehend each icon's function or representation.

Toggle Button

Toggle buttons are simple on/off controls that let you pick one option at a time. It can be enabled using the toggleable property.

Customization

The Button components can be customized using classNames or inline styles for dynamic appearance changes, consistent color themes for branding, and interactive behaviors like hover and click responses.

Complex styled button

The Button can utilize image backgrounds and hover effects to improve visual appeal and strengthen branding by showing their function in various layouts.

Accessibility

The Button component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the Button component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The Button component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Button component:

Keyboard interaction

The Button component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Button component.