How to design "active" "inactive" status in Material design?

by Oksi   Last Updated January 12, 2018 10:16 AM

We are building a web app.

The page you open is the list of all the email campaigns you created.

Each line - is a separate campaign, the line contains the name, date created, status(active/inactive).

From this view, you can change the status of the campaign and click on the status to change it.

How should I better design this active/inactive button in Material design?

I was thinking of something like this, but it's not a material design: enter image description here



Answers 2


You can simply display "active" and "inactive" as the value of your drop box instead of "status". It is pretty much intuitive.

Ivan Venediktov
Ivan Venediktov
January 12, 2018 09:51 AM

You should use the Material Design Switch in order to align your website with the material design guidelines. Check the implementation guidelines here.

enter image description here

Applying the switch to your grid, the basic structure could look like this :

enter image description here you need to style and modify it to fit with your branding guidelines.

Kishan Pankaj
Kishan Pankaj
January 12, 2018 10:01 AM

Related Questions



Should you show buttons in previews?

Updated March 10, 2016 07:06 AM



Creating a new row above or below a selected table row

Updated November 15, 2017 14:16 PM