How it works...

This example serves to illustrate the combinatorial result of the variant and color properties. Alternatively, you can completely disable buttons and yet still control the variant aspect of their emphasis (the color property has no effect on disabled buttons).

The order of most to least emphatic variant values is as follows:

  1. contained
  2. outlined
  3. text

The order of most to least emphatic color values is as follows:

  1. primary
  2. secondary
  3. default

By combining these two property values, you can control the emphasis of your buttons. Sometimes, you really need a button to stand out, so you can combine contained and primary:

If you want ...

Get React Material-UI Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.