> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# The Button

> A button you probably shouldn't press, built with conditional rendering and client-side state.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

A single button that escalates through four states of increasingly urgent warnings — all driven by `If`/`Elif`/`Else` branches and `SetState` actions with no server calls.

<ComponentPreview json={{"view":{"cssClass":"pf-app-root max-w-none p-0","type":"Div","children":[{"cssClass":"w-full","type":"Card","children":[{"type":"CardHeader","children":[{"cssClass":"items-center justify-between","type":"Row","children":[{"type":"CardTitle","content":"The Button"},{"type":"Condition","cases":[{"when":"{{ presses > 0 }}","children":[{"type":"Badge","label":"{{ presses }}","variant":"secondary"}]}]}]}]},{"type":"CardContent","children":[{"cssClass":"gap-4","type":"Column","children":[{"type":"Condition","cases":[{"when":"{{ presses == 0 }}","children":[{"type":"Button","label":"This is probably the best button to press","variant":"success","size":"default","disabled":false,"onClick":{"action":"setState","key":"presses","value":"{{ presses + 1 }}"}}]},{"when":"{{ presses == 1 }}","children":[{"type":"Alert","variant":"info","icon":"info","children":[{"type":"AlertTitle","content":"Thank you!"},{"type":"AlertDescription","content":"Your cooperation has been noted and will be reported."}]},{"type":"Button","label":"Please do not press this button again","variant":"outline","size":"default","disabled":false,"onClick":{"action":"setState","key":"presses","value":"{{ presses + 1 }}"}}]},{"when":"{{ presses == 2 }}","children":[{"type":"Alert","variant":"warning","icon":"alert-triangle","children":[{"type":"AlertTitle","content":"We did ask nicely"},{"type":"AlertDescription","content":"Management has been informed."}]},{"cssClass":"pf-progress-flat","type":"Progress","value":66.0,"max":100.0,"variant":"default","size":"default","indicatorClass":"bg-yellow-500"},{"content":"Patience remaining: 34%","type":"Muted"},{"type":"Button","label":"Please do not press this button again","variant":"destructive","size":"default","disabled":false,"onClick":{"action":"setState","key":"presses","value":"{{ presses + 1 }}"}}]},{"when":"{{ presses == 3 }}","children":[{"type":"Alert","variant":"destructive","icon":"alert-triangle","children":[{"type":"AlertTitle","content":"Now look what you've done"},{"type":"AlertDescription","content":"The improbability drive has been activated."}]},{"cssClass":"pf-progress-flat","type":"Progress","value":100.0,"max":100.0,"variant":"default","size":"default","indicatorClass":"bg-red-500"},{"cssClass":"gap-2 items-center","type":"Row","children":[{"type":"Loader","variant":"spin","size":"sm"},{"content":"Recalculating the probability of your existence...","type":"Muted"}]},{"type":"Button","label":"OK maybe press it one more time","variant":"ghost","size":"default","disabled":false,"onClick":{"action":"setState","key":"presses","value":0}}]}],"else":[{"content":"This should not happen.","type":"Text"}]}]}]},{"type":"CardFooter","children":[{"type":"Condition","cases":[{"when":"{{ presses > 0 }}","children":[{"content":"Share and Enjoy!","type":"Muted"}]}]}]}]}]},"state":{"presses":0}}} playground="ZnJvbSBwcmVmYWJfdWkgaW1wb3J0IFByZWZhYkFwcApmcm9tIHByZWZhYl91aS5hY3Rpb25zIGltcG9ydCBTZXRTdGF0ZQpmcm9tIHByZWZhYl91aS5jb21wb25lbnRzIGltcG9ydCAoCiAgICBBbGVydCwgQWxlcnREZXNjcmlwdGlvbiwgQWxlcnRUaXRsZSwgQmFkZ2UsIEJ1dHRvbiwgQ2FyZCwgQ2FyZENvbnRlbnQsCiAgICBDYXJkRm9vdGVyLCBDYXJkSGVhZGVyLCBDYXJkVGl0bGUsIENvbHVtbiwgTG9hZGVyLAogICAgTXV0ZWQsIFByb2dyZXNzLCBSb3csIFRleHQsCikKZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jb250cm9sX2Zsb3cgaW1wb3J0IEVsaWYsIEVsc2UsIElmCmZyb20gcHJlZmFiX3VpLnJ4IGltcG9ydCBSeAoKcHJlc3NlcyA9IFJ4KCJwcmVzc2VzIikKCndpdGggUHJlZmFiQXBwKHN0YXRlPXsicHJlc3NlcyI6IDB9LCBjc3NfY2xhc3M9Im1heC13LW5vbmUgcC0wIik6CiAgICB3aXRoIENhcmQoY3NzX2NsYXNzPSJ3LWZ1bGwiKToKICAgICAgICB3aXRoIENhcmRIZWFkZXIoKToKICAgICAgICAgICAgd2l0aCBSb3coYWxpZ249ImNlbnRlciIsIGNzc19jbGFzcz0ianVzdGlmeS1iZXR3ZWVuIik6CiAgICAgICAgICAgICAgICBDYXJkVGl0bGUoIlRoZSBCdXR0b24iKQogICAgICAgICAgICAgICAgd2l0aCBJZihwcmVzc2VzID4gMCk6CiAgICAgICAgICAgICAgICAgICAgQmFkZ2UocHJlc3NlcywgdmFyaWFudD0ic2Vjb25kYXJ5IikKICAgICAgICB3aXRoIENhcmRDb250ZW50KCk6CiAgICAgICAgICAgIHdpdGggQ29sdW1uKGdhcD00KToKICAgICAgICAgICAgICAgIHdpdGggSWYocHJlc3NlcyA9PSAwKToKICAgICAgICAgICAgICAgICAgICBCdXR0b24oCiAgICAgICAgICAgICAgICAgICAgICAgICJUaGlzIGlzIHByb2JhYmx5IHRoZSBiZXN0IGJ1dHRvbiB0byBwcmVzcyIsCiAgICAgICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9InN1Y2Nlc3MiLAogICAgICAgICAgICAgICAgICAgICAgICBvbl9jbGljaz1TZXRTdGF0ZShwcmVzc2VzLCBwcmVzc2VzICsgMSksCiAgICAgICAgICAgICAgICAgICAgKQogICAgICAgICAgICAgICAgd2l0aCBFbGlmKHByZXNzZXMgPT0gMSk6CiAgICAgICAgICAgICAgICAgICAgd2l0aCBBbGVydCh2YXJpYW50PSJpbmZvIiwgaWNvbj0iaW5mbyIpOgogICAgICAgICAgICAgICAgICAgICAgICBBbGVydFRpdGxlKCJUaGFuayB5b3UhIikKICAgICAgICAgICAgICAgICAgICAgICAgQWxlcnREZXNjcmlwdGlvbigKICAgICAgICAgICAgICAgICAgICAgICAgICAgICJZb3VyIGNvb3BlcmF0aW9uIGhhcyBiZWVuIG5vdGVkIGFuZCB3aWxsIGJlIHJlcG9ydGVkLiIKICAgICAgICAgICAgICAgICAgICAgICAgKQogICAgICAgICAgICAgICAgICAgIEJ1dHRvbigKICAgICAgICAgICAgICAgICAgICAgICAgIlBsZWFzZSBkbyBub3QgcHJlc3MgdGhpcyBidXR0b24gYWdhaW4iLAogICAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PSJvdXRsaW5lIiwKICAgICAgICAgICAgICAgICAgICAgICAgb25fY2xpY2s9U2V0U3RhdGUocHJlc3NlcywgcHJlc3NlcyArIDEpLAogICAgICAgICAgICAgICAgICAgICkKICAgICAgICAgICAgICAgIHdpdGggRWxpZihwcmVzc2VzID09IDIpOgogICAgICAgICAgICAgICAgICAgIHdpdGggQWxlcnQodmFyaWFudD0id2FybmluZyIsIGljb249ImFsZXJ0LXRyaWFuZ2xlIik6CiAgICAgICAgICAgICAgICAgICAgICAgIEFsZXJ0VGl0bGUoIldlIGRpZCBhc2sgbmljZWx5IikKICAgICAgICAgICAgICAgICAgICAgICAgQWxlcnREZXNjcmlwdGlvbigiTWFuYWdlbWVudCBoYXMgYmVlbiBpbmZvcm1lZC4iKQogICAgICAgICAgICAgICAgICAgIFByb2dyZXNzKHZhbHVlPTY2LCBtYXg9MTAwLCBpbmRpY2F0b3JfY2xhc3M9ImJnLXllbGxvdy01MDAiKQogICAgICAgICAgICAgICAgICAgIE11dGVkKCJQYXRpZW5jZSByZW1haW5pbmc6IDM0JSIpCiAgICAgICAgICAgICAgICAgICAgQnV0dG9uKAogICAgICAgICAgICAgICAgICAgICAgICAiUGxlYXNlIGRvIG5vdCBwcmVzcyB0aGlzIGJ1dHRvbiBhZ2FpbiIsCiAgICAgICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9ImRlc3RydWN0aXZlIiwKICAgICAgICAgICAgICAgICAgICAgICAgb25fY2xpY2s9U2V0U3RhdGUocHJlc3NlcywgcHJlc3NlcyArIDEpLAogICAgICAgICAgICAgICAgICAgICkKICAgICAgICAgICAgICAgIHdpdGggRWxpZihwcmVzc2VzID09IDMpOgogICAgICAgICAgICAgICAgICAgIHdpdGggQWxlcnQodmFyaWFudD0iZGVzdHJ1Y3RpdmUiLCBpY29uPSJhbGVydC10cmlhbmdsZSIpOgogICAgICAgICAgICAgICAgICAgICAgICBBbGVydFRpdGxlKCJOb3cgbG9vayB3aGF0IHlvdSd2ZSBkb25lIikKICAgICAgICAgICAgICAgICAgICAgICAgQWxlcnREZXNjcmlwdGlvbigKICAgICAgICAgICAgICAgICAgICAgICAgICAgICJUaGUgaW1wcm9iYWJpbGl0eSBkcml2ZSBoYXMgYmVlbiBhY3RpdmF0ZWQuIgogICAgICAgICAgICAgICAgICAgICAgICApCiAgICAgICAgICAgICAgICAgICAgUHJvZ3Jlc3ModmFsdWU9MTAwLCBtYXg9MTAwLCBpbmRpY2F0b3JfY2xhc3M9ImJnLXJlZC01MDAiKQogICAgICAgICAgICAgICAgICAgIHdpdGggUm93KGdhcD0yLCBhbGlnbj0iY2VudGVyIik6CiAgICAgICAgICAgICAgICAgICAgICAgIExvYWRlcih2YXJpYW50PSJzcGluIiwgc2l6ZT0ic20iKQogICAgICAgICAgICAgICAgICAgICAgICBNdXRlZCgiUmVjYWxjdWxhdGluZyB0aGUgcHJvYmFiaWxpdHkgb2YgeW91ciBleGlzdGVuY2UuLi4iKQogICAgICAgICAgICAgICAgICAgIEJ1dHRvbigKICAgICAgICAgICAgICAgICAgICAgICAgIk9LIG1heWJlIHByZXNzIGl0IG9uZSBtb3JlIHRpbWUiLAogICAgICAgICAgICAgICAgICAgICAgICB2YXJpYW50PSJnaG9zdCIsCiAgICAgICAgICAgICAgICAgICAgICAgIG9uX2NsaWNrPVNldFN0YXRlKHByZXNzZXMsIDApLAogICAgICAgICAgICAgICAgICAgICkKICAgICAgICAgICAgICAgIHdpdGggRWxzZSgpOgogICAgICAgICAgICAgICAgICAgIFRleHQoIlRoaXMgc2hvdWxkIG5vdCBoYXBwZW4uIikKICAgICAgICB3aXRoIENhcmRGb290ZXIoKToKICAgICAgICAgICAgd2l0aCBJZihwcmVzc2VzID4gMCk6CiAgICAgICAgICAgICAgICBNdXRlZCgiU2hhcmUgYW5kIEVuam95ISIpCg">
  <CodeGroup>
    ```python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui import PrefabApp
    from prefab_ui.actions import SetState
    from prefab_ui.components import (
        Alert, AlertDescription, AlertTitle, Badge, Button, Card, CardContent,
        CardFooter, CardHeader, CardTitle, Column, Loader,
        Muted, Progress, Row, Text,
    )
    from prefab_ui.components.control_flow import Elif, Else, If
    from prefab_ui.rx import Rx

    presses = Rx("presses")

    with PrefabApp(state={"presses": 0}, css_class="max-w-none p-0"):
        with Card(css_class="w-full"):
            with CardHeader():
                with Row(align="center", css_class="justify-between"):
                    CardTitle("The Button")
                    with If(presses > 0):
                        Badge(presses, variant="secondary")
            with CardContent():
                with Column(gap=4):
                    with If(presses == 0):
                        Button(
                            "This is probably the best button to press",
                            variant="success",
                            on_click=SetState(presses, presses + 1),
                        )
                    with Elif(presses == 1):
                        with Alert(variant="info", icon="info"):
                            AlertTitle("Thank you!")
                            AlertDescription(
                                "Your cooperation has been noted and will be reported."
                            )
                        Button(
                            "Please do not press this button again",
                            variant="outline",
                            on_click=SetState(presses, presses + 1),
                        )
                    with Elif(presses == 2):
                        with Alert(variant="warning", icon="alert-triangle"):
                            AlertTitle("We did ask nicely")
                            AlertDescription("Management has been informed.")
                        Progress(value=66, max=100, indicator_class="bg-yellow-500")
                        Muted("Patience remaining: 34%")
                        Button(
                            "Please do not press this button again",
                            variant="destructive",
                            on_click=SetState(presses, presses + 1),
                        )
                    with Elif(presses == 3):
                        with Alert(variant="destructive", icon="alert-triangle"):
                            AlertTitle("Now look what you've done")
                            AlertDescription(
                                "The improbability drive has been activated."
                            )
                        Progress(value=100, max=100, indicator_class="bg-red-500")
                        with Row(gap=2, align="center"):
                            Loader(variant="spin", size="sm")
                            Muted("Recalculating the probability of your existence...")
                        Button(
                            "OK maybe press it one more time",
                            variant="ghost",
                            on_click=SetState(presses, 0),
                        )
                    with Else():
                        Text("This should not happen.")
            with CardFooter():
                with If(presses > 0):
                    Muted("Share and Enjoy!")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "pf-app-root max-w-none p-0",
        "type": "Div",
        "children": [
          {
            "cssClass": "w-full",
            "type": "Card",
            "children": [
              {
                "type": "CardHeader",
                "children": [
                  {
                    "cssClass": "items-center justify-between",
                    "type": "Row",
                    "children": [
                      {"type": "CardTitle", "content": "The Button"},
                      {
                        "type": "Condition",
                        "cases": [
                          {
                            "when": "{{ presses > 0 }}",
                            "children": [{"type": "Badge", "label": "{{ presses }}", "variant": "secondary"}]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "type": "CardContent",
                "children": [
                  {
                    "cssClass": "gap-4",
                    "type": "Column",
                    "children": [
                      {
                        "type": "Condition",
                        "cases": [
                          {
                            "when": "{{ presses == 0 }}",
                            "children": [
                              {
                                "type": "Button",
                                "label": "This is probably the best button to press",
                                "variant": "success",
                                "size": "default",
                                "disabled": false,
                                "onClick": {"action": "setState", "key": "presses", "value": "{{ presses + 1 }}"}
                              }
                            ]
                          },
                          {
                            "when": "{{ presses == 1 }}",
                            "children": [
                              {
                                "type": "Alert",
                                "variant": "info",
                                "icon": "info",
                                "children": [
                                  {"type": "AlertTitle", "content": "Thank you!"},
                                  {
                                    "type": "AlertDescription",
                                    "content": "Your cooperation has been noted and will be reported."
                                  }
                                ]
                              },
                              {
                                "type": "Button",
                                "label": "Please do not press this button again",
                                "variant": "outline",
                                "size": "default",
                                "disabled": false,
                                "onClick": {"action": "setState", "key": "presses", "value": "{{ presses + 1 }}"}
                              }
                            ]
                          },
                          {
                            "when": "{{ presses == 2 }}",
                            "children": [
                              {
                                "type": "Alert",
                                "variant": "warning",
                                "icon": "alert-triangle",
                                "children": [
                                  {"type": "AlertTitle", "content": "We did ask nicely"},
                                  {"type": "AlertDescription", "content": "Management has been informed."}
                                ]
                              },
                              {
                                "cssClass": "pf-progress-flat",
                                "type": "Progress",
                                "value": 66.0,
                                "max": 100.0,
                                "variant": "default",
                                "size": "default",
                                "indicatorClass": "bg-yellow-500"
                              },
                              {"content": "Patience remaining: 34%", "type": "Muted"},
                              {
                                "type": "Button",
                                "label": "Please do not press this button again",
                                "variant": "destructive",
                                "size": "default",
                                "disabled": false,
                                "onClick": {"action": "setState", "key": "presses", "value": "{{ presses + 1 }}"}
                              }
                            ]
                          },
                          {
                            "when": "{{ presses == 3 }}",
                            "children": [
                              {
                                "type": "Alert",
                                "variant": "destructive",
                                "icon": "alert-triangle",
                                "children": [
                                  {"type": "AlertTitle", "content": "Now look what you've done"},
                                  {
                                    "type": "AlertDescription",
                                    "content": "The improbability drive has been activated."
                                  }
                                ]
                              },
                              {
                                "cssClass": "pf-progress-flat",
                                "type": "Progress",
                                "value": 100.0,
                                "max": 100.0,
                                "variant": "default",
                                "size": "default",
                                "indicatorClass": "bg-red-500"
                              },
                              {
                                "cssClass": "gap-2 items-center",
                                "type": "Row",
                                "children": [
                                  {"type": "Loader", "variant": "spin", "size": "sm"},
                                  {
                                    "content": "Recalculating the probability of your existence...",
                                    "type": "Muted"
                                  }
                                ]
                              },
                              {
                                "type": "Button",
                                "label": "OK maybe press it one more time",
                                "variant": "ghost",
                                "size": "default",
                                "disabled": false,
                                "onClick": {"action": "setState", "key": "presses", "value": 0}
                              }
                            ]
                          }
                        ],
                        "else": [{"content": "This should not happen.", "type": "Text"}]
                      }
                    ]
                  }
                ]
              },
              {
                "type": "CardFooter",
                "children": [
                  {
                    "type": "Condition",
                    "cases": [
                      {
                        "when": "{{ presses > 0 }}",
                        "children": [{"content": "Share and Enjoy!", "type": "Muted"}]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      "state": {"presses": 0}
    }
    ```
  </CodeGroup>
</ComponentPreview>

## How It Works

The whole escalation runs off one integer in [state](/concepts/state): `presses`, seeded to `0` by `PrefabApp(state={"presses": 0})`. `presses = Rx("presses")` is a reactive reference used both to branch the UI and to advance it. There is no notion of a "screen" or a "step" stored anywhere — the current screen is purely a function of the press count.

The body is a single [conditional](/concepts/expressions) chain: `If(presses == 0)`, then `Elif(presses == 1)`, `Elif(presses == 2)`, `Elif(presses == 3)`, and a final `Else()`. [`Elif`](/components/conditional) works like Python's, so exactly one branch renders for any value of `presses`. Each comparison (`presses == 1`, and so on) compiles to an expression the renderer evaluates live, swapping the entire content region as the count changes.

The button in each branch advances the count with an [action](/concepts/actions). The first three carry `on_click=SetState(presses, presses + 1)` — `presses + 1` is a reactive expression evaluated at click time, so each press moves to the next state. The fourth branch (`presses == 3`) instead resets with `SetState(presses, 0)`, looping back to the start, which is why "press it one more time" returns you to the original button. The trailing `Else()` is a safety net that never renders in normal use.

The header and footer read the same key independently. `with If(presses > 0):` in the header shows a `Badge` with the live press count, and the matching guard in the footer reveals the "Share and Enjoy!" line once you've pressed at least once. Both update automatically because they depend on `presses`, the single source the button writes to.