Signal
Signals show a level, such as priority or strength, as a small row of stepped bars.
By priority
The number of lit bars carries the level, the color only supports it.
Urgent
Normal
Low
None
Number of bars
Use from two to five .signal-bar elements; the steps stay even.
1 of 2
2 of 3
3 of 4
4 of 5
Sizes
A signal is a 1.25rem square, like an extra small avatar. Set --tblr-signal-size to resize it.
Colors
Add .signal-{color} to color the bars.
Semantic colors
Extra colors
| Task | Priority |
|---|---|
| Payment page returns 500 on submit | Urgent |
| Update the onboarding copy | Normal |
| Export invoices to CSV | Normal |
| Refresh the team page photos | Low |