---
title: "Hide buttons that need JavaScript until it · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/errors-and-outages/hide-script-only-controls
id: WEB-223
level: Recommended
updated: 2026-10-22
build: a2a6bdfed830
tokens: 617
licence: "CC BY 4.0"
licence_url: https://creativecommons.org/licenses/by/4.0/
---

# Hide buttons that need JavaScript until it runs

For AI agents: the [site map](https://agentwranglers.se/llms.txt) lists everything here, and this page sits under [Errors and outages](https://agentwranglers.se/playbook/website/errors-and-outages.md).

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers.md). Updated 2026-10-22.

- ID: WEB-223
- Level: Recommended
- Chapter: [Errors and outages](https://agentwranglers.se/playbook/website/errors-and-outages.md)
- Rule: Never show a button that does nothing. Hide controls that need JavaScript until the script is running, without moving the page.
- Check: Turn JavaScript off. No button is visible that does nothing, and layout shift stays at 0 with JavaScript on.
- 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. Start from working HTML, as [Build on HTML that already works](https://agentwranglers.se/playbook/website/site-architecture/progressive-enhancement.md) says.

## Examples

**Using these examples:** they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

### HTML example

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

## Related rules

- WEB-19 [Build on HTML that already works](https://agentwranglers.se/playbook/website/site-architecture/progressive-enhancement.md) in Website

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/website/errors-and-outages/hide-script-only-controls">Agent Wranglers website playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Keep working when a script or service fails](https://agentwranglers.se/playbook/website/errors-and-outages/graceful-degradation.md)
- Next: [Warn before retiring an address](https://agentwranglers.se/playbook/website/errors-and-outages/deprecation-and-sunset.md)
- [Errors and outages](https://agentwranglers.se/playbook/website/errors-and-outages.md)