Disabled State

The disabled state is a UI condition that indicates elements are inactive or non-interactive.

Guidelines

 

Disabled State

The default Disabled state is used for all core action-based components, such as buttons, checkboxes, and radio buttons. When an element is in this state, it appears grayed out and does not respond to user interactions. This clearly indicates that the element is currently inactive and cannot be used. This state is crucial for maintaining the integrity of user inputs and preventing actions that are not currently allowed.

Disabled default 1
Disabled default 2
Disabled default 3

Style

Element

Token

Component

background.disabled

Text

text.disabled

Icon

text.disabled

Border

border.disabled

 

Read Only

The Read Only state allows users to view information without the ability to modify it. This is particularly useful in forms or data displays where editing is restricted. Elements in this state are styled to indicate they are non-editable, but they remain visible and informative.

Read Only

Style

Element

 

Text

text.static.secondary

Icon

text.disabled

Border

border.disabled


Hidden

The Hidden state is used when certain options or elements are not available and do not need to be shown at all. This helps in keeping the UI clean and focused on available options, such as hiding time slots that are no longer available. By removing these elements from view, we reduce clutter and prevent users from attempting to interact with unavailable options.

Hidden