waybar-states(5)

💖 waybar-states(5) — the states property, bestie edition 💖

okay so real quick: this is the manual page for waybar-states, aka the states property in waybar. it's short, it's sweet, it's lowkey iconic, and by the end you're gonna be styling your bar like a main character. let's go 🦋

---

✨ NAME ✨

waybar — the states property 🌸

---

👀 OVERVIEW 👀

so, some modules support what we call states. what that does is let you use percentage values as styling triggers — like, when the value matches the declared state value, boom, a class gets applied. it's giving "your battery is dying so let's make it orange" energy 💅

---

🎀 STATES 🎀

every entry (aka every state) is made of exactly two little friends:

• a <name> — typeof: string 💖
• a <value> — typeof: integer ✨

and here's the tea about how they work:

• the state can be addressed as a CSS class in the style.css. the name of that CSS class is the <name> of the state. now, when does each class wake up and activate? listen closely bestie, this part is important:
  • for the battery module: the class activates when the current value is equal to or less than the configured <value>.
  • for all other modules: the class activates when the current value is equal to or greater than the configured <value>.
• ALSO (and this is the fun part 🙈), each state can have its own format. you configure those with format-<name> — or, if you wanna differentiate a bit more, you go with format-<status>-<state>. obsessed. 😭

---

🌈 EXAMPLE 🌈

here's what it looks like in the config, no cap:

     "battery": {
          "bat": "BAT2",
          "interval": 60,
          "states": {
               "warning": 30,
               "critical": 15
          },
          "format": "{capacity}% {icon}",
          "format-icons": ["", "", "", "", ""],
          "max-length": 25
     }

like… look at those states. warning at 30, critical at 15. she's organized, she's prepared, she ate 💅

---

💅 STYLING STATES 💅

• #battery.<state> — where <state> can be defined in the config 🎀

🌸 EXAMPLE 🌸

• #battery.warning: { background: orange; } 🍊
• #battery.critical: { background: red; } 🔥

see how the <state> you named in your config just slides right into the CSS selector? that's the whole vibe. slay. 👑

---

quick vibe check: battery module goes equal to or less than <value>, every other module goes equal to or greater than <value>. don't mix those up bestie, it's literally the one thing that trips people up 😭

---

aaaand that's the whole page!! this was waybar-states(5) from the File Formats Manual, dated 2026-02-08 — mwah, go make your bar pretty, ily, bye 🫶💖✨