Skip to content
design
Components

Signal strength

A signal's strength as bars of rising height, with its strength in words and as a value.

On this page
The five strengths a WiFi network's signal can read, from none to excellent.
Code
import { SignalStrength } from "@bosunkit/components/signal-strength";
import type { ReactElement } from "react";

export const description: string = "No signal, weak, fair, good and excellent, each with its word and value.";

export default function Showcase(): ReactElement {
  return (
    <div style={{ display: "flex", gap: "var(--space-lg)", flexWrap: "wrap", alignItems: "flex-end" }}>
      {[0, 18, 42, 68, 92].map(
        (value: number): ReactElement => (
          <SignalStrength key={value} value={value} size="lg" showQuality showValue />
        ),
      )}
    </div>
  );
}

A signal strength draws a reading from 0 to 100, as NetworkManager reports a WiFi network's, or an RSSI in dBm, as bars of rising height. Each bar is a quarter of the range, so weak lights one bar, fair two, good three and excellent four, and the bars always agree with the word. It is one image a screen reader hears as "Signal: Good, 72%"; label names what the signal is of, and showQuality and showValue write the word and the value beside the bars.

A weak signal is not an alert: the lit bars take the text color and the rest the border color, never an alert color. With no reading it draws empty dashed bars and says "Unknown", never zero. bars draws three to five.

Examples

From an RSSI in dBm

A reception read in dBm: -67 dBm is good, -85 dBm weak.
Code
import { SignalStrength } from "@bosunkit/components/signal-strength";
import type { ReactElement } from "react";

export const description: string = "A reception read in dBm: -67 dBm is good, -85 dBm weak.";

export default function FromDbm(): ReactElement {
  return (
    <div style={{ display: "flex", gap: "var(--space-lg)", flexWrap: "wrap" }}>
      <SignalStrength dbm={-67} label="Marina WiFi" showQuality />
      <SignalStrength dbm={-85} label="Club WiFi" showQuality />
    </div>
  );
}

No reading

No reading: empty dashed bars and the word, never zero.
Code
import { SignalStrength } from "@bosunkit/components/signal-strength";
import type { ReactElement } from "react";

export const description: string = "No reading: empty dashed bars and the word, never zero.";

export default function Unknown(): ReactElement {
  return <SignalStrength value={null} showQuality />;
}

Sizes and bar counts

The three sizes, and three, four and five bars.
Code
import { SignalStrength } from "@bosunkit/components/signal-strength";
import type { ReactElement } from "react";

export const description: string = "The three sizes, and three, four and five bars.";

export default function Sizes(): ReactElement {
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <div style={{ display: "flex", gap: "var(--space-lg)", alignItems: "flex-end" }}>
        <SignalStrength value={70} size="sm" />
        <SignalStrength value={70} size="md" />
        <SignalStrength value={70} size="lg" />
      </div>
      <div style={{ display: "flex", gap: "var(--space-lg)", alignItems: "flex-end" }}>
        <SignalStrength value={70} bars={3} size="lg" />
        <SignalStrength value={70} bars={4} size="lg" />
        <SignalStrength value={70} bars={5} size="lg" />
      </div>
    </div>
  );
}

Props

PropTypeDefaultDescription
valuenumber | null | undefined–The strength from 0 to 100, as NetworkManager reports a WiFi network's; null for no reading.
dbmnumber | undefined–The strength as an RSSI in dBm, read when value is not given: -100 dBm is 0 and -50 dBm is 100.
barsnumber | undefined4How many bars it draws, 3 to 5; 4 unless set.
labelstring | undefined–What the signal is of, for its name, translated by the caller ("Marina WiFi"); "Signal" unless set.
showValueboolean | undefinedfalseWrites the strength as a value after the bars ("72%").
showQualityboolean | undefinedfalseWrites the strength in words after the bars ("Good").
size"sm" | "md" | "lg" | undefined"md"How large the bars are; md unless set.
classNamestring | undefined–Classes added to the root's own.
testIdstring | undefined–Becomes data-testid on the root.