Found 90 Articles for ReactJS

In this article, we are going to learn how to use chip actions in Material UI. Chips are small components that stand in for input, an attribute, or an action. With the aid of chips, users can input data, select options, filter content, or start processes. Although it is presented here as a standalone component, the most common application will be some form of input, so some of the behavior is not shown in its proper context. Chip API The Chip API is utilized to add a chip to the React MUI. It comes with props − avatar − ... Read More

To improve the user design in any application of material UI, avatars play an important role. Avatars are mostly found everywhere, like in the social media profile section, posts, etc., but how do you create these avatars in React using MUI? So, In this article, we are going to learn how to create different Avatars in Material UI. But before we dive into the steps of creating the different avatars in MUI, let’s first understand what exactly an avatar is. What is an Avatar? An element known as an avatar is employed to visually depict a user or another entity. ... Read More

Material UI is a framework, for React that offers a Select component. This component allows users to pick options from a menu. Today we will explore how to create a Native Select in Material UI. One of the components in Material UI is the "Native Select." It plays a role, in creating menus with native select functionality, giving users the ability to choose from various options. How is Native Select different from Select Component? The Native Select and Select components have some differences. Native Select offers a user interface on platforms by rendering a native HTML element. It provides ... Read More

Badges play an important role in designing a web UI, whether you are building a social media site, a messaging app, or anything else that requires the use of badges. Material UI provides an easy way to accomplish this task with just one component called the Badge API. So, in this article, we are going to learn how to control Badge visibility in the Material UI. But before we dive into the steps of controlling badge visibility in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small element that is attached ... Read More

To provide a great user experience, the colors and sizes of different components added to a website play an important role. The React MUI allows you to change the orientation, color, and size of the toggle buttons easily by using some props given in the documentation. In this article, we are going to learn how to change Toggle Button orientation with color and size in Material UI. But before we dive into the steps of changing the given properties, let’s first understand what exactly a Toggle Button is. What is a Toggle Button? Toggle buttons are a very popular component ... Read More

Floating Action Buttons or FABs in every application works as a prominent call-to-action button that performs a specific action, such as creating a new item or triggering an essential function. Material UI, a popular UI framework for React, offers a flexible and customizable way to implement FABs with ease. In this article, we will learn how to change the size and color of Floating action buttons in Material UI using React. What is a Floating Action Button? Before moving further, let’s understand what is a Floating action button or FAB. These buttons are included in an app's user interface to ... Read More

Implementing radio buttons, in Material UI, a used UI framework for React is straightforward. You can effortlessly customize the size, color, and orientation of the radio buttons to match the design of your application. In this article, we will explore how to modify the size, color, and orientation of radio buttons, in Material UI. What is a Radio Button? Radio buttons are an element, in forms that enable users to choose one option from a set of choices that're mutually exclusive. They appear as buttons that can be either selected (checked) or unselected (unchecked). When one radio button is selected ... Read More

In this article, we will explore how to customize the appearance of a button group, in Material UI so that it suits the needs of your application. Material UI, also known as MUI is a frontend library developed by Google. It provides a collection of to use React components that can be used in frameworks, like React and NextJS. With Material UI you get access to a range of components such as buttons, checkboxes, selects and more. One specific component called ButtonGroup is particularly useful for grouping buttons Button groups are great for enhancing the user experience by organizing buttons. ... Read More

Badges play an important role in designing a web UI, whether you are building a social media site, a messaging app, or anything else that requires the use of badges. Material UI provides an easy way to accomplish this task with just one component called the Badge API. So, in this article, we are going to learn how to align and overlap badges in Material UI. But before we dive into the steps to align and overlap the badges in MUI, let’s first understand what exactly a badge is. What is a Badge? A badge is a small component mostly ... Read More

Styled Components, a highly acclaimed library within the React ecosystem, empowers developers to utilize CSS-in-JS, presenting advantages such as encapsulation, reusability, and simplified style maintenance. On the other hand, Material-UI stands as a widely embraced UI component library for React that diligently adheres to the principles of Material Design. It offers an extensive selection of customizable pre-built components. While Material-UI comes equipped with its own styling solution known as makeStyles, it seamlessly integrates with Styled Components, enabling developers to leverage the combined capabilities of both libraries. Our exploration revolves around the installation process, specifically highlighting the @mui/styled-engine and @mui/styled-engine-sc packages. ... Read More