Essential Studio® for React Release Notes

v29.2.4
May 14, 2025

Button

The Button component is designed to create highly customizable and interactive button elements with a variety of styling and functional options. It allows for tailored interactions through different configurations such as size, color, icon positioning, and toggle capability.

Explore the demo here

Key features

  • Color Variants: Style buttons with distinct color options like 'warning', 'success', 'danger', and 'info' to fit your application's theme.
  • Icon Support: Integrate SVG icons within buttons for enhanced visual cues. Configure the icon's position to be left, right, top, or bottom relative to button text.
  • Toggle Functionality: Use the button as a toggle to maintain and represent states within your application, enabling buttons to switch between active and inactive states upon user interaction.
  • Size Options: Adjust button dimensions with size variants such as 'small', 'medium' and 'bigger', allowing for flexibility in different UI contexts.
  • Variant Styles: Choose from various button styles like 'outlined', 'filled', and 'flat' to seamlessly integrate with your design language.
  • Selection Management: Include prop configurations to set initial states, making it simple to handle selection states, especially useful for toggle buttons.

Checkbox

The Checkbox component offers a flexible and user-friendly way to allow users to make binary selections. It supports various states and configurations to accommodate different use cases in applications.

Explore the demo here

Key features

  • Selection States: The Checkbox component can be configured to be in checked, unchecked, or indeterminate states. This provides a visual cue for users to understand the current selection state.
  • Label Support: Display informative text alongside the checkbox to clearly convey its purpose to users. The label can be positioned either before or after the checkbox element based on UI preferences.
  • Label Positioning: Configure the label placement with the labelPlacement prop, choosing whether the label appears before or after the Checkbox.

Chip

The Chip component represents information in a compact form, such as entity attribute, text, or action. It provides a versatile way to display content in a contained, interactive element.

Explore the demo here

Key features

  • Variants: Display chips with different visual styles using either 'filled' or 'outlined' variants to match your design requirements.
  • Colors: Customize the appearance with predefined color options including primary, info, danger, success, and warning.
  • Icons and Avatars: Enhance visual representation with leading icons, trailing icons, or avatars to provide additional context.

ChipList

The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It provides a flexible way to manage and interact with a group of chip elements.

Explore the demo here

Key features

  • Selection Modes: Supports three selection types - 'single', 'multiple', and 'none' to control how users can select chips.
  • Data Binding: Easily populate the ChipList with an array of strings, numbers, or custom chip configurations.
  • Customizable Chips: Each chip can be individually styled with avatars, leading icons, trailing icons, and different variants.
  • Removable Chips: Configure chips to be removable with built-in delete event handling.
  • Controlled & Uncontrolled Modes: Supports both controlled and uncontrolled component patterns for selection and deletion.

The Dropdown Button component enhances user interfaces with a menu of actions or options that appears on button click, offering an intuitive dropdown mechanism for users.

Explore the demo here

Key features

  • Color Options: Style the dropdown button using color variants such as 'warning', 'success', 'danger', and 'info' to align with application themes.
  • Icon Customization: Integrate icons within the dropdown button using CSS classes or React components (SVG). Adjust icon placement relative to button text with options for left, right, top, or bottom positioning.
  • Interactive Elements: Configure the dropdown content using the itemTemplate prop for advanced functionality within dropdown items. Define action items and their properties for a seamless user interaction experience.
  • Responsive Design: Adapt the dropdown button with size options — 'small' and 'large' — to fit different UI scenarios.
  • Popup Control: The isPopupCreatedOnClick prop controls the dynamic creation of the popup for enhanced performance. Manage the button's open/close states with the toggle prop for precise control over user interactions.

Floating Action Button

The Floating Action Button (FAB) component provides a prominent primary action within an application interface, positioned for high visibility and customizable with various styling options.

Explore the demo here

Key features

  • Color Variants: Customizable color options such as 'warning', 'success', 'danger', and 'info' are available to help the FAB blend seamlessly with your application's color scheme.
  • Icon Customization: Integrate SVG icons within buttons for enhanced visual appeal. Control icon placement relative to text with configurable options for positioning.
  • Visibility Control: Easily manage the visibility of the FAB using the isVisible prop, deciding if it should be displayed based on application logic.
  • Positioning: The FAB can be positioned flexibly with options like top-left, top-right, bottom-left, and bottom-right to fit different design requirements.
  • Size Options: Modify the size of the FAB with options for 'small', 'medium' and 'bigger', accommodating different interface contexts.
  • Toggle Functionality: Activate toggle behavior for the FAB to allow it to switch states on each user interaction, which can be useful for certain UI scenarios.

Message

The Message component has an option to display the messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user. The following key features are available in the Message component.

Explore the demo here

Key features

  • Severity: Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as Normal, Success, Info, Warning, and Error.
  • Variants: Provides an option to display the message with predefined appearance variants. The available variants such as Text, Outlined, and Filled.
  • Visibility: Provides an option to show or hide the message.
  • Template: Provides an option to customize the content of the message.

NumericTextBox

The NumericTextBox component provides a specialized input field for numeric values with validation, formatting, and increment/decrement capabilities. It offers precise control over numeric input with support for various number formats, validation rules, and user interaction patterns.

Explore the demo here

Key features

  • Value constraints: Set minimum and maximum allowed values to restrict user input within specific numeric ranges.
  • Step configuration: Define increment/decrement step size for precise value adjustments using spin buttons or keyboard controls.
  • Spin buttons: Optional increment and decrement buttons that allow users to adjust values without typing.
  • Number formatting: Comprehensive formatting options including decimal places, currency symbols, and percentage formatting.
  • LabelMode Implements floating label functionality with configurable behavior modes to enhance form usability.
  • Keyboard navigation: Enhanced keyboard support for incrementing/decrementing values using arrow keys.

RadioButton

The RadioButton component enables users to select a single option from a group, offering a clear circular interface for making selections. It is a simple and efficient way to present mutually exclusive choices to users.

Explore the demo here

Key features

  • Selection State: Easily configure the RadioButton to be in a checked or unchecked state, indicating selected or unselected options within a group.
  • Label Customization: The RadioButton can be accompanied by a text label to describe its function, which helps users understand the purpose of the radio selection.
  • Label Positioning: Flexibly position the label relative to the RadioButton with options available for placing it before or after the button, enhancing UI layout consistency.
  • Form Integration: The value attribute of the RadioButton can be included as part of form data submitted to the server, facilitating efficient data processing.

Skeleton

The Skeleton component provides a visual placeholder that simulates the layout of content while it's being loaded, improving the perceived performance of your application. It offers various shapes and animation effects to match your UI design needs.

Explore the demo here

Key features

  • Variants: Choose from multiple placeholder shapes including Text, Circle, Square, and Rectangle to match the content being loaded.
  • Animation: Apply different loading animations such as Wave, Fade or Pulse to provide visual feedback during loading states.
  • Customizable Dimensions: Easily configure the width and height of skeleton elements using CSS units or pixel values.

Split Button

The Split Button component combines a primary button action with a dropdown menu, allowing users to access additional options or actions from a compact interface, enhancing user interaction with contextual commands.

Explore the demo here

Key features

  • Primary and Secondary Actions: The Split Button provides a main action on the button itself, with secondary actions available in a dropdown list, offering ease of use and efficiency in accessing commands.
  • Customization Options: Style the Split Button with various color options like 'warning', 'success', 'danger', and 'info', and integrate icons using CSS class names or React components (SVG) to enhance visual appeal.
  • Icon Placement: Configure the position of icons relative to button text, with options available for left, right, top, or bottom positioning, ensuring design consistency.
  • Popup Management: Control the behavior of the dropdown popup with the isPopupCreatedOnClick prop for performance optimization and manage toggle states efficiently using the toggle prop.
  • Template Support: Utilize the itemTemplate prop to customize the dropdown menu items, ensuring a tailored user experience that matches application needs.

TextArea

The TextArea component provides a multi-line text input field with enhanced functionality for collecting longer text content from users. It offers various customization options to adapt to different application requirements and design systems.

Explore the demo here

Key features

  • Resizing options: Supports multiple resize modes including Both, Horizontal, and Vertical to control how users can resize the input area.
  • LabelMode: Implements floating label functionality with configurable behavior modes to enhance form usability.
  • Variants: Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
  • Customizable dimensions: Supports setting specific dimensions through rows and cols properties or through width styling.
  • Controlled and uncontrolled modes: Supports both controlled mode (using the value prop) and uncontrolled mode (using the defaultValue prop) to accommodate different state management approaches.

TextBox

The TextBox component provides a feature-rich input field for collecting user text input with enhanced styling options and validation states. It supports both controlled and uncontrolled input modes to fit various application requirements.

Explore the demo here

Key features

  • Variants: Offers multiple visual styles including Standard, Outlined, and Filled variants to match your application's design language.
  • Sizes: Provides size options (Small and Medium) to control the component's dimensions for different UI contexts.
  • Color: Supports different color schemes including Success, Warning, and Error to visually communicate validation states.
  • LabelMode: Implements floating label functionality with configurable behavior modes to enhance form usability.
  • Prefix and suffix: Supports adding custom icons at the beginning or end of the input field for enhanced visual cues.
  • Controlled and uncontrolled modes: Supports both controlled mode (using the value prop) and uncontrolled mode (using the defaultValue prop) to accommodate different state management approaches.

Toast

The Toast component provides a non-intrusive way to display temporary notifications to users. It offers a flexible system for showing messages that automatically dismiss after a configurable timeout period.

Explore the demo here

Key features

  • Multiple Positions: Position toasts at different locations on the screen (top-left, top-right, bottom-left, bottom-right, etc.) to suit your application's design.
  • Severity: Display toasts with different severity levels (Success, Info, Warning, Error) with appropriate icons and colors to convey message importance.
  • Customizable Timeout: Configure how long toasts remain visible before automatically dismissing.
  • Animation Effects: Apply entrance and exit animations to enhance the user experience.
  • Global Toast Service: Use the ToastUtility or useToast hook to display toasts from anywhere in your application without needing to include the component in your JSX.

Tooltip

The Tooltip component displays additional information when users hover, click, or focus on an element. It provides a flexible way to enhance user experience by showing contextual information.

Explore the demo here

Key features

  • Multiple Trigger Modes: Display tooltips through various interaction methods including hover, click or focus.
  • Positioning: Place tooltips in 12 different positions (TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight, LeftTop, LeftCenter, LeftBottom, RightTop, RightCenter, RightBottom).
  • Animation Effects: Choose from 15 built-in animation effects for both opening and closing tooltips.
  • Follow Cursor: Option to make tooltips follow the mouse cursor movement.
  • Sticky Mode: Keep tooltips open until explicitly closed by the user.
  • Arrow Pointer: Configurable arrow pointer that indicates which element the tooltip relates to.