@syncfusion/ej2-buttons

What is @syncfusion/ej2-buttons?

@syncfusion/ej2-buttons is a comprehensive package for creating various types of buttons in web applications. It provides a wide range of button components such as standard buttons, toggle buttons, radio buttons, and checkboxes, all of which are highly customizable and easy to integrate.

What are @syncfusion/ej2-buttons's main functionalities?

Standard Button

This feature allows you to create a standard button with customizable content. The button can be styled and configured to perform actions when clicked.

const button = new ej.buttons.Button({ content: 'Click Me' }); button.appendTo('#element');

Toggle Button

This feature allows you to create a toggle button that can switch between two states. It is useful for scenarios where you need a button to represent an on/off state.

const toggleButton = new ej.buttons.Button({ content: 'Toggle', isToggle: true }); toggleButton.appendTo('#element');

Radio Button

This feature allows you to create a radio button, which is part of a group of options where only one option can be selected at a time.

const radioButton = new ej.buttons.RadioButton({ label: 'Option 1', name: 'options' }); radioButton.appendTo('#element');

Checkbox

This feature allows you to create a checkbox, which can be used for binary choices such as accepting terms and conditions.

const checkbox = new ej.buttons.CheckBox({ label: 'Accept Terms' }); checkbox.appendTo('#element');

Other packages similar to @syncfusion/ej2-buttons

react-bootstrap

React-Bootstrap provides a set of React components that implement Bootstrap's styles and components. It includes button components similar to @syncfusion/ej2-buttons, but it is more focused on providing a complete UI framework based on Bootstrap.

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It offers a wide range of button components with extensive customization options, similar to @syncfusion/ej2-buttons, but it is part of a larger suite of Material Design components.

antd

Ant Design (antd) is a comprehensive UI framework for React that includes a variety of button components. It provides similar functionalities to @syncfusion/ej2-buttons, with a focus on enterprise-level applications and a rich set of design guidelines.

README

ej2-buttons Component

A package of Syncfusion JavaScript UI Components (Essential JS 2) Button, CheckBox, RadioButton and Switch.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install Button and its dependent packages, use the following command

npm install @syncfusion/ej2-buttons

Components included

Following list of components are available in the package.

• Button - Button is a graphical user interface element that triggers an event on its click action.

  • Getting Started
  • View Online Demos
  • Product Page

• CheckBox - CheckBox is a graphical user interface element that allows to select one or more options from the choices.

  • Getting Started
  • View Online Demos
  • Product Page

• RadioButton - RadioButton is a graphical user interface element that allows to select one option from the choices.

  • Getting Started
  • View Online Demos
  • Product Page

• Switch - Switch is a graphical user interface element that allows you to toggle between checked and unchecked states.

  • Getting Started
  • View Online Demos
  • Product Page

Supported Frameworks

These components are available in following list of frameworks.

1. Angular
2. React
3. VueJS
4. ASP.NET Core
5. ASP.NET MVC
6. JavaScript (ES5)

Showcase samples

• Expense Tracker (Source, Live Demo)
• Loan Calculator (Source, Live Demo)

Key Features

Button

• Types - Provided with different types of Button.

• Predefined Styles - Provided with predefined styles of Button.

• Sizes - Provided with different sizes of Button.

• Icons - Supports text and icon on the Button.

CheckBox

• States - Provided with different states of CheckBox.

• Label - Supports label and its positioning.

• Sizes - Provided with different sizes of CheckBox.

RadioButton

• States - Provided with different states of RadioButton.

• Label - Supports label and its positioning.

• Sizes - Provided with different sizes of RadioButton.

Switch

• Text - Supports text.
• Sizes - Provided with different sizes of Switch.

Support

Product support is available for through following mediums.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion, ej2.

License

Check the license detail here.

Changelog

Check the changelog here

© Copyright 2023 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.