System Status Area

The system status area is located on the right hand side of the top bar. It provides feedback on the state of the system. The area also has a menu which gives access to commonly used actions in relation to system status.

The System Status Area is not an area that is variously called the Notification Area or System Tray and should not be used by applications (foreground or background). This distinction is necessary to ensure the entire top of the screen is designed properly, system owned and coherent, able to be modified or extended, scale well to smaller form-factors, and not become a dumping ground or high-profile branding opportunity.


  • Use a style that is consistent with the text and menus present on the top panel.
  • Don't distract - indicators should use colors in a considered and measured way. Icons and indicators must not change rapidly or abruptly (not more than once a second).
  • Offer limited, and common functionality.
  • Don't be a primary interaction point - any action that is available through a status icon should also be accessible from elsewhere in the design. For example, network access must also be able to be configured through the system preferences / control-center.
  • Each aspect of system status should map to part of the Settings application.


  • Steer clear of overt application integration, in order to stay focused on system level status. Therefore, don't include controls for music players or notifications.
  • System configuration/preferences (rather than status).

Relevant Art



Windows 10

Bottom of the action center has a grid of system status items:

Each item performs an action on click. Some of them display more options (example: network allows connecting to a wifi network), but most toggle a setting or perform an action (project, connect, hotspot, flight mode).

Chrome OS


Top Bar Icons

Icons are listed in order of position in the top bar.


When to display

Screen Recording

When screen recording is taking place

Screen Sharing

When the screen is being shared


When an app is using location services


When wired network in use [1]


When wi-fi is in use [1]

Mobile broadband

When mobile broadband is in use [1]

USB tether

When a USB tether is connected [1]

Bluetooth tether

When a Bluetooth tether is being used [1]


When a VPN is connected

Airplane mode

When airplane mode is on


When bluetooth is in use


When a battery is present


When audio output is present

Power off

When a battery is not present

[1] Network status icon notes:

  • "In use" is defined as being used by network manager as the default route (interfaces are selected using a hard-coded ranking).

  • If the user attempts to use a higher ranked interface and an error occurs, we should also show the status icon for the higher ranked interface. In practical terms, this means that, if the system is using mobile broadband and wi-fi is in an error state, the wi-fi icon is also displayed.
  • Network status is always displayed per interface: generic send/receive or no connection icons are never used.


When to display





When audio is present


Speaker icon turns into headphones when they are plugged in.


When a microphone is in use



When screen brightness can be adjusted



Wired network

When a network cable is connected

"Limited Connectivity"
If there is more than one wired network, the label should be preceded with the network name. For example: "eth0 Connected"


When wi-fi hardware is available

When connected: "<network name">
"Connecting to <network name>"
"Hotspot Active"
"<network name>: Limited Connectivity"
"<network name>: Error"

Mobile Broadband

When a mobile broadband interface is available and set up

When connected: "<network name>"
"<network name>: Error"
If there is more than one mobile broadband connection, "Off" should be replaced by "<network name>: Off"

Bluetooth tethered network

When a bluetooth device with network is set up, and bluetooth is on

"<Device> Connected"
"<Device> Not in Use"
"<Device>: Error"

If the signal strength can be ascertained, use network-cellular* for the icon; if not, use network-connected-cellular.

USB tether

When a USB tether is connected

Same as Bluetooth tether, replacing the device name with "USB Tether" if a device name cannot be found.

If the signal strength can be ascertained, use network-cellular* for the icon; if not, use network-connected-cellular.


When a VPN has been set up

"VPN Connected"
"VPN Error"
" VPN Off"
If there is more than one VPN, replace "VPN" with the VPN name.


When paired devices are set up

"On", "<no.> Connected Devices"
"1 Connected Device"
"No Connected Devices", "Off"

Airplane Mode

When airplane mode is on

Always reads "Airplane Mode On"

Screen Sharing

When screen sharing is taking place

"Screen is Being Shared"


When location services are being used by an application

"Location Services in Use"


When a battery is present

"Fully Charged"
"<Time> Remaining (<Percentage>)"
"<Time> Until Fully Charged (<Percentage>)"


If there is more than one user or session

The user's name





Lock Rotation

If the screen rotation can be locked





Power Off



Turns into a suspend button when the alt key is held.

Each submenu should contain high-level controls for the status item. This is typically on/off, but can also include things like switching profiles for wired connections.

If there is a relevant control center settings panel, a link should be provided to it.

Lock & Login Screens

The top bar should perform the same in the lock and login screens. The content of the system status menu varies according to context, though:

  • Sliders are always visible and active.
  • Submenus should be visible but insensitive (expander triangles should be hidden).
  • In the buttons section, only the power off button should be visible.

Old Mockups

Original GNOME Shell menu designs:


See Also


Design/OS/SystemStatus (last edited 2018-07-02 13:23:29 by AllanDay)