Disabled states completely 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 any 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 either 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 an enabled state once the dependencies are resolved and/or the pre-requisites are achieved
- The user should still be able to see the component in a temporarily disabled state
- 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 individual component.
Read-only
Use the read-only variation in cases where the content of a disabled component or element remains relevant or is important 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 feature of the UI.
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.
