# Signal > A small row of stepped bars that shows a level, such as priority, strength or coverage. Show priority, strength or any other level with the signal component - a compact row of stepped bars that sits next to a label. Source: https://docs.tabler.io/ui/components/signal --- ## Basic example Build a signal from a `.signal` wrapper with three `.signal-bar` elements. Add `.active` to each bar that should be lit. The bars grow in even steps, and the unlit ones stay visible in a lighter tone. ```html ``` ## With a label Put the signal next to a text label. When the label already names the level, hide the signal from assistive technology with `aria-hidden="true"`. ```html
Urgent
Normal
Low
``` ## Colors Add a `.signal-{color}` class to color the bars. Without it, the signal uses the secondary text color. ```html
``` ## Number of bars Use from two to five bars. The component counts them and keeps the steps even, so no extra class is needed. ```html
``` ## Size A signal is a `1.25rem` square, the same as an extra small [avatar](/ui/components/avatar). Set `--tblr-signal-size` on the signal to resize it. ```html
``` ## Accessibility - Show the level with the number of lit bars, not with color alone. An orange and a green signal with the same bars look identical to many users. - A signal without a text label needs `role="img"` and an `aria-label` that states the level, for example "Priority: urgent". - A signal next to a label that already names the level is decoration. Hide it with `aria-hidden="true"`.