Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Disabled states

Disabled states occur when buttons or features can't be used because something's missing, like incomplete form fields or lack of permissions.


Disabled States - just avoid!

Disabled states are commonly used in user interface design to indicate that a certain feature or function is currently unavailable. However, they can often lead to confusion and frustration for users, particularly those with disabilities. By considering alternatives and focusing on accessibility, designers can create UIs that are more inclusive and user-friendly.

The problem with disabled states

Confusion and frustration

Disabled states can be ambiguous and confusing for users. Users may not understand why they can't interact with a certain element and may struggle to figure out how to enable it. This can lead to a frustrating user experience.

Accessibility issues

Disabled states can also pose accessibility issues.

  1. They are often displayed with reduced opacity or in a light gray color, which can be difficult for users with visual impairments to see.
  2. Disabled elements are often not keyboard-accessible, which can be problematic for users who rely on keyboard navigation.

Alternatives to disabled states

Enable and explain

One alternative to using a disabled state is to keep the UI element enabled. Then, upon user interaction, provide a contextual helper text or use a tooltip or toast to explain why the action can't currently be performed.

Hide irrelevant elements

Another approach is to hide elements that are not relevant in the current context. This can help declutter the UI and allow users to focus on the task at hand. However, this should be done carefully to avoid causing confusion or spatial inconsistencies.

Validate user input on submit

Instead of disabling a submit button until all form fields are filled out correctly, consider enabling the button and validating user input on submit. If there are errors, provide clear and specific error messages to help the user correct them.


Page last updated


Was this helpful?