Usage

Use when you want to disable access to an interface feature or element, but still want to maintain the element’s visibility to the user.

Example of an inactive checkbox inside an active checkbox

Checkmark icon indicating a good choice Do

Provide context and show users how to enable inactive features or elements.

Example of an inactive button without adequate context

Cross icon indicating a bad choice Don’t

Show inactive elements without adequate context.

The components that can have an inactive state are:

  • buttons
  • checkboxes
  • dropdown buttons
  • input fields
  • radio buttons.

Style

Apply a 40% alpha channel to typography, icons, buttons, or components when the feature or the interface element is inactive.

Style of an inactive button