Disabled Toggle for React

A disabled toggle shows that the option exists even when it can't be used right now, and the toolbar keeps its layout, so the other buttons don't move when it becomes available again. Hide the toggle only when the option makes no sense in the current context at all, not when it's temporarily unavailable.

Explain it, but not only in a tooltip. A disabled Toggle ignores pointer events and can't take focus, so a tooltip on it never opens for mouse or keyboard users. Put the reason in visible text near the toolbar, such as "Select text to format it", or keep the toggle enabled and show the reason when it's pressed.

Yes. The Toggle uses the disabled: variant for its faded look (disabled:opacity-50 and disabled:pointer-events-none), so add your own, such as disabled:opacity-30, on the Toggle. Keep it clearly different from the enabled state, or people will try to press it.

Pass a boolean expression instead of a fixed value, for example disabled while a document is read-only or while nothing is selected. When the value changes, the Toggle enables or disables on the next render. The prop is disabled.

Yes. Start it pressed and disable it, and it shows the pressed background, faded, and can't be changed. That fits formatting that is applied but locked, such as a read-only document that still shows its bold text as bold. Combine defaultPressed (or pressed) with disabled.

Yes. The Toggle is a native button with the disabled attribute, so screen readers announce it as dimmed or unavailable along with its aria-label, and Tab skips it. Because keyboard users can't reach it, any explanation of why it's disabled has to be in text they can reach elsewhere.