Disabled states altogether remove the interactive function of a component.
Disabled variations
- Default disabled: A default disabled state doesn't involve visual interactions and can't be clicked or selected. It takes on the default disabled visual style and is always supported by an explanatory tooltip shown on the hover of the component.
- Read-only: The user can't interact with the read-only state, but the content is still accessible. The visual style should not include interactive indicators, such as hover states or text embellishments (e.g., underlines). This state is mostly used with text input components.
- Hidden: In the hidden, disabled variation, the component is completely hidden from view. The user does not know the option is there.
Default disabled
Use a default disabled state when a component is temporarily disabled due to prerequisites or dependencies—when one part of an action relies on another.
- Default disabled states are temporary and most commonly activated by a user’s action or inaction.
- The default disabled component becomes enabled once the dependencies are resolved and/or the pre-requisites are achieved.
- The user should still be able to see the component temporarily disabled.
- The component in a disabled state is always supported by an explanatory tooltip shown on the hover.
Style
Style default disabled states by decreasing opacity to 50% with no hover state change and applying a not-allowed cursor. Apply the correct disabled state according to each component.
Read-only
Use the read-only variation in cases where the content of a disabled component or element remains relevant or is essential for the user to complete the task.
This state allows the user to read the information without changing or interacting with it.
Style
The visual style of the read-only states depends on the individual component but never contains any interactive indicators.
Hidden
Use the hidden, disabled variation when the user doesn't have permission to view, interact with, or take action on a UI feature.
You can enable the hidden element and make it visible on the UI by changing the assigned permission.
An exception might be when you want to promote a new feature or when it is necessary to show a specific action to users who do not have permission. In this case, the default disabled state can be used.
