Disabled Buttons

We've added Luna's card next to Tiger's. Luna is reserved: a family is coming to meet her, so for now, her button says "Reserved" and shouldn't do anything. It's a copy of Tiger's button with all the classes from this lesson. (If Luna's card is below Tiger's, your preview is too narrow for both cards side by side. That doesn't matter.)

In HTML, a button is switched off with the disabled attribute. It has no value: you just write it in the opening tag, like the required attribute from the HTML course. A disabled button can't be clicked, and the Tab key skips it.

<button disabled>Reserved</button>

Browsers show disabled buttons in gray, but Preflight and our classes override that, so Luna's button would still look just like Tiger's. Visitors would try to click it and wonder why nothing happens. That's what the variant disabled: is for: it applies a class only to an element with the disabled attribute (in CSS, the pseudo-class :disabled). These two classes are common:

• disabled:opacity-50: the button is half transparent, so it looks faded,
• disabled:cursor-not-allowed: over the button, the mouse pointer turns into a crossed-out circle.

There's one more catch: hover: and active: don't care whether the button is disabled, so Luna's button would still get darker when you point at it or press it. The fix is to combine two variants: enabled:hover:bg-orange-600 applies only when the button is enabled (not disabled; in CSS, :enabled) and the mouse pointer is over it. You can chain variants like this whenever a class should apply only when several conditions hold at once.