Skip to main content

Status Bars

The status bar is the operating system tray that goes across the top of the device screen.

Specifications

Anatomy

Android

Status Bar Anatomy Android

iOS

Status Bar Anatomy iOS

Minimal

A list should always stack vertically and have a container set to a fixed width. This allows the atom.list-item elements to scale appropriately when set to “fill container” as their width.

Overlay

Light

When a list is not scrollable, there is no scrollbar present or taking up space.

Status Bar Light

Dark

List remains the same width Scrollbar track is also list background color / divider color List items shrink in width to fill space

Status Bar Dark

Blue

When a list is not scrollable, there is no scrollbar present or taking up space.

Status Bar Blue

White

List remains the same width Scrollbar track is also list background color / divider color List items shrink in width to fill space

Status Bar White

Last updated May 7, 2024.