Use of `enabled` and `disabled`

The enabled and disabled pseudo-classes allow you to style elements such as buttons and inputs based on their state. These pseudo-classes are particularly useful when you want to create visually distinct styles for interactive and non-interactive states without unnecessary redundancy.

Overview

• The disabled pseudo-class applies styles to elements that are non-interactive, typically using the disabled attribute (e.g., <button disabled>).
• The enabled pseudo-class applies styles to elements that are interactive and ready to be used.

By leveraging these pseudo-classes, you can conditionally apply styles. For example, instead of first adding styles and then overriding them for a disabled state, you can directly apply styles only when an element is enabled.

Disabled Button styling

This example uses the disabled pseudo-class to remove styles like shadows, gradients, and pseudo-elements when the button is disabled.

<button className="relative group h-9 px-3 rounded-lg border border-primary-700 shadow-xs shadow-gray-950/25 bg-linear-to-b from-primary-500 to-primary-600 duration-300 hover:brightness-105 before:absolute before:inset-0 before:rounded-[7px] before:border-t before:border-white/25 disabled:from-gray-100 disabled:to-gray-100 disabled:border-transparent disabled:shadow-none disabled:before:hidden">
    <span className="text-sm text-white group-disabled:text-gray-400">Click me</span>
</button>
<button disabled className="relative group h-9 px-3 rounded-lg border border-primary-700 shadow-xs shadow-gray-950/25 bg-linear-to-b from-primary-500 to-primary-600 duration-300 hover:brightness-105 before:absolute before:inset-0 before:rounded-[7px] before:border-t before:border-white/25 disabled:from-gray-100 disabled:to-gray-100 disabled:border-transparent disabled:shadow-none disabled:before:hidden">
    <span className="text-sm text-white group-disabled:text-gray-400">Disabled</span>
</button>

Enabled Button styling

Using the enabled pseudo-class, styles like gradients, shadows, borders, and pseudo-elements are applied only when the button is interactive.

<button className="relative group h-9 px-3 rounded-lg duration-300 enabled:border enabled:bg-linear-to-b enabled:shadow-xs enabled:border-primary-700 enabled:shadow-gray-950/25 enabled:from-primary-500 enabled:to-primary-600 enabled:before:absolute enabled:before:inset-0 hover:brightness-105 before:rounded-[7px] before:border-t before:border-white/25 disabled:bg-gray-200">
    <span className="text-sm text-white group-disabled:text-gray-950">Click me</span>
</button>
<button disabled className="relative group h-9 px-3 rounded-lg duration-300 enabled:border enabled:bg-linear-to-b enabled:shadow-xs enabled:border-primary-700 enabled:shadow-gray-950/25 enabled:from-primary-500 enabled:to-primary-600 enabled:before:absolute enabled:before:inset-0 hover:brightness-105 before:rounded-[7px] before:border-t before:border-white/25 disabled:bg-gray-200">
    <span className="text-sm text-white group-disabled:text-gray-400">Disabled</span>
</button>

Explanation

• Using disabled: Removes unwanted styles like shadows, gradients, and pseudo-elements when the button is disabled.
• Using enabled: Ensures specific styles are only applied when the button is interactive, avoiding the need to override these styles for the disabled state.

The enabled and disabled pseudo-classes are powerful tools for conditionally styling elements based on their state. It’s up to you to decide how to use them to create visually distinct styles for interactive and non-interactive elements.