waybar-states(5)

# OVERVIEW

Some modules support 'states' which allows percentage values to be used as styling triggers to
apply a class when the value matches the declared state value.

# STATES

- Every entry (*state*) consists of a *<name>* (typeof: *string*) and a *<value>* (typeof: *integer*).

	- The state can be addressed as a CSS class in the *style.css*. The name of the CSS class is the *<name>* of the state.
	  Each class gets activated when the current capacity is equal or below the configured *<value>*.

	- Also each state can have its own *format*.
	  Those can be configured via *format-<name>*.
	  Or if you want to differentiate a bit more even as *format-<status>-<state>*.

# EXAMPLE

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

# STYLING STATES

- *#battery.<state>*
  - *<state>* can be defined in the *config*.

# EXAMPLE:

- *#battery.warning: { background: orange; }*
- *#battery.critical: { background: red; }*