---
title: "Hide buttons that need JavaScript until it · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/when-things-break/hide-script-only-controls
updated: 2026-10-20
licence: "All rights reserved"
---

# Hide buttons that need JavaScript until it runs

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [When things break](https://agentwranglers.se/playbook/website/when-things-break)
- Rule: Never show a button that does nothing. Hide controls that need JavaScript until the script is running, without moving the page.
- How: Add a `js` class to `<html>` from a tiny inline script in the head. Give script-only controls `visibility: hidden` until that class is there. This keeps their space, so nothing shifts when they appear. Content and links never depend on it.
- Check: Turn JavaScript off. No button is visible that does nothing, and layout shift stays at 0 with JavaScript on.

Example:

```html
<script>document.documentElement.classList.add("js")</script>
<style>
  :root:not(.js) .theme-switch, :root:not(.js) .play-button { visibility: hidden; }
</style>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/when-things-break/hide-script-only-controls`.

- Previous: [Keep working when a script or service fails](https://agentwranglers.se/playbook/website/when-things-break/graceful-degradation)
- Next: [Keep working when the network drops](https://agentwranglers.se/playbook/website/when-things-break/offline-support)
- [When things break](https://agentwranglers.se/playbook/website/when-things-break)