Status bar

The status bar, typically found at the top of the screen, displays the current time, Wi-Fi signal, cellular network information, battery level, and other status icons. This component manages the display of the device's native status bar.

👉 The Tag

📍 Where to add the tag: A top-level app page.

[statusbar:dark]

[statusbar:light]

IOS view

Android view

🏷️ How to add the tag

In your Figma design, simply add the tag [statusbar:dark] or [statusbar:light] to the top-level part of the page. It should be added to every screen where you'd like to show the status bar.

Set up in Figma: Dark Status Bar

Set up in Figma: Light Status Bar

💾 Example files

Duplicate the files below to see how to set it up!

Bravo Sample: Status Bar | FigmaFigma