Props: cssClass <ButtonComponent cssClass='e-success'>Success</ButtonComponent> | Props: className <Button className='sf-success'>Success</Button> | The cssClass prop in EJ2 React is replaced with the standard React className prop in React. |
Props: iconCss <ButtonComponent iconCss='e-btn-sb-icon e-prev-icon'>Previous</ButtonComponent> | Props: icon <Button icon={prevIcon}>Previous</Button> | The iconCss property used in EJ2 React Button has been replaced with the icon prop (e.g : String and React.ReactNode) in React. This allows direct usage of React components or SVG elements as icons rather than CSS class references. |
Props: iconPosition <ButtonComponent iconPosition='Left'></ButtonComponent> | Props: iconPosition <Button iconPosition={Position.Left}></Button> | The iconPosition property in React is functionally the same as in EJ2 React. |
Props: isToggle <ButtonComponent isToggle={true}></ButtonComponent> | Props: toggleable <Button toggleable={true}></Button> | The isToggle property in EJ2 React has been renamed to toggleable in React. Use the toggleable prop to enable toggle functionality in the Button component. |
Props: disabled <ButtonComponent disabled={true}></ButtonComponent> | Props: disabled <Button disabled={true}></Button> | The disabled prop is supported in both EJ2 React and React. |
Props: checked <ButtonComponent checked={true}></ButtonComponent> | Props: selected <Button selected={true}></Button> | The checked property in EJ2 React has been renamed to selected in React. Use the selected prop to control the toggle state of the Button component. |
Props: enableRtl <ButtonComponent enableRtl={true} iconCss='e-btn-icons e-setting-icon'>Settings</ButtonComponent> | Props: rtl
<Provider dir={'rtl'}>
<samp className='snippet'> <Button>Settings</Button></samp>
<Provider> | The enableRtl prop in EJ2 React is replaced in React by wrapping the component with a Provider that includes the dir="rtl" attribute to enable RTL support. |
Props: e-link <ButtonComponent cssClass='e-link' onClick={btnClick}>Go to google</ButtonComponent> | Props: isLink <Button isLink={true} onClick={btnClick}> Go to google </Button> | The cssClass='e-link' approach in EJ2 React has been replaced with the more semantic isLink={true} prop in React. Use the isLink prop to style the button as a hyperlink with underline. |
Props: e-small, e-large <ButtonComponent cssClass='e-small'> Small </ButtonComponent> | Props: size <Button size={Size.Small} >Small</Button> | CSS class-based sizing in EJ2 React has been replaced with a type-safe size prop in React. Use the Size enum for button sizing, with mappings: "e-small" → Size.Small, "e-large" → Size.Large. |
Props: e-flat, e-outline <ButtonComponent cssClass='e-flat'>Flat</ButtonComponent> | Props: variant <Button variant={Variant.Standard}>Standard Button</Button> | CSS class-based styling (e.g., cssClass='e-flat') in EJ2 React has been replaced with the type-safe variant prop in React. Use the Variant enum with options like Filled, Standard, and Outlined. |
Props: e-primary, e-success, e-info, e-warning, e-danger <ButtonComponent cssClass='e-info'>Info</ButtonComponent> | Props: Color <Button color={Color.Info}>Info</Button> | CSS class-based coloring in EJ2 React has been replaced with a type-safe color prop in React. Use the Color enum to represent various colors like Primary, Secondary, Warning, Success, Error, and Info. |