Signal
A small row of stepped bars that shows a level, such as priority, strength or coverage.
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.
<span class="signal" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>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".
<div class="d-flex flex-column gap-2">
<div class="d-flex align-items-center gap-2">
<span class="signal signal-orange" aria-hidden="true">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
</span>Urgent
</div>
<div class="d-flex align-items-center gap-2">
<span class="signal signal-blue" aria-hidden="true">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>Normal
</div>
<div class="d-flex align-items-center gap-2">
<span class="signal signal-green" aria-hidden="true">
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
<span class="signal-bar"></span>
</span>Low
</div>
</div>Colors
Add a .signal-{color} class to color the bars. Without it, the signal uses the secondary text color.
<div class="d-flex gap-3">
<span class="signal" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-green" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-red" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
</div>Number of bars
Use from two to five bars. The component counts them and keeps the steps even, so no extra class is needed.
<div class="d-flex gap-3">
<span class="signal signal-primary" role="img" aria-label="Level 1 of 2">
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" role="img" aria-label="Level 3 of 4">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" role="img" aria-label="Level 4 of 5">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
</div>Size
A signal is a 1.25rem square, the same as an extra small avatar. Set --tblr-signal-size on the signal to resize it.
<div class="d-flex align-items-end gap-3">
<span class="signal signal-primary" style="--tblr-signal-size: 1rem" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" style="--tblr-signal-size: 1.5rem" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
<span class="signal signal-primary" style="--tblr-signal-size: 2rem" role="img" aria-label="Level 2 of 3">
<span class="signal-bar active"></span>
<span class="signal-bar active"></span>
<span class="signal-bar"></span>
</span>
</div>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 anaria-labelthat 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".
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
signal | component | Container element |
signal-bar | part | One bar; from two to five bars are supported |
signal-{color} | color | Colors the bars with a theme color |
active | state | Lights a bar, set on signal-bar |
CSS
Variables
The component uses local CSS variables on .signal for real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. Source: core/scss/ui/_signal.scss.
--signal-size: #{$signal-size};
--signal-color: #{$text-secondary};
--signal-bars: 3;
--signal-bar-border-radius: #{$signal-bar-border-radius};
--signal-bar-inactive-opacity: #{$signal-bar-inactive-opacity};
--signal-gap: calc(var(--signal-size) * #{$signal-gap-ratio});
--signal-padding-y: calc(var(--signal-size) * #{$signal-padding-y-ratio});
--signal-padding-x: calc(var(--signal-size) * #{$signal-padding-x-ratio});Sass variables
Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.
$signal-size: map.get(map.get($avatar-sizes, 'xs'), size);
$signal-gap-ratio: 0.1;
$signal-padding-y-ratio: 0.2;
$signal-padding-x-ratio: 0.1;
$signal-bar-border-radius: 1px;
$signal-bar-inactive-opacity: 0.24;
$signal-max-bars: 5;
