Controller Card

PRO

The ControllerCard component helps you to simply create a beautiful controller card that is switchable between on and off states.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// NextJS Material Dashboard 2 PRO examples import ControllerCard from "/examples/Cards/ControllerCard"; // @mui material components import Icon from "@mui/material/Icon";

Off

Temperature

Active

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''dark'darkUsed to set the ControllerCard background color when the `state` prop is equal to true.
stateboolfalseIf true the ControllerCard background color will change, the switch will be active and the text off will be on.
icon*nodeUsed to set the ControllerCard icon. Its a required prop.
title*stringUsed to set the ControllerCard title. Its a required prop.
descriptionstringUsed to set the ControllerCard description.
onChange*eventUsed to handle the `state` of the ControllerCard and makes the switch button able to toggle between `off` and `on` state.

Functionality

Here is a complete example of ControllerCard including the functionality that how you can switch between `on` and `off` states of the card.