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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.