Top Bars
The header at the top of a screen: where you are, how to get back, and at most a couple of things to do here. Compact and large, plus the section headers that break up what is underneath.
Preview
The header at the top of a screen: where you are, how to get back, and at most a couple of things to do here. On iOS this is the NavigationStack toolbar, on Android a TopAppBar.
The bar has no fill of its own. Background Glass is hidden in all six variants, so out of the box a Top Bar sits on whatever is behind it. The title block takes what the actions leave, 236 here.
Size
Two sizes, two layouts, not one scaled. Compact keeps the title on the back button's row. Large gives the title its own row underneath, the pattern that collapses into compact as the user scrolls.
The title steps from 20/28 to 24/32 and the caption from 12/16 to 14/20: a different type pairing, not the same one enlarged. Large reads the Heading font family, compact reads Body. Both are Inter today, so the split costs nothing and is there when they diverge.
Actions
Three options on one axis: nothing, one filled button for what this screen is for, or up to two quiet ones. The title block shrinks to make room, so a long title truncates sooner.
Main Button is brand/base under a white check. Secondary Actions is a 92 container at gap 4 holding two 44 circles on brand/alpha-10, brand blue at 10 percent in both themes, glyphs in brand/base. Two is the ceiling the component ships; a third would eat the title.
Glass
One boolean, off by default. Turn it on when the bar floats over scrolling content that must stay readable underneath. Leave it off on a plain background: glass over a flat colour is a blur with nothing to blur.
The hatch is this page's ground, not the component's. In the file this is a Figma GLASS effect with refraction and dispersion, which CSS cannot express. Here it runs as the 72 percent fill with a 15px backdrop blur: an approximation, not a match. Same substitution as Modal Sheet.
Section Header
A separate component for headers inside a screen, not above it. A title over a block of content with one optional link. Use it to break a long screen into groups the eye can scan.
The component measures 340 by 24 in the file and does not clip, but its title is 28 tall and its link 36, so both hang outside the frame, the link by 6 at each end. Drawn here at the 36 the content needs. The title runs font size lg 18 on line height xl 28, one step apart, which is the extra 4.
Properties
Two variant axes and five instance properties on Top Bar. Section Header is its own component with two.
No status bar in this component and no search field, so a real header is this plus whatever the platform draws above it. The back affordance is a Button instance, so its states come from Button, not from here.
Tokens
Every value the two components read, resolved to the primitive underneath.
brand/alpha-10 is a single mode value, so the secondary buttons sit at 10 percent of the same blue on a black screen as on a white one, a much fainter pill in dark. Every glyph is drawn at 22 with a 2.2 stroke while dimensions/icon/stroke is 2: the 20 Lucide artboard was scaled to 22 and took its stroke with it. Geometry runs on spacing/16 64, spacing/11 44, spacing/6 24, spacing/4 16, spacing/3 12, spacing/2 8 and spacing/1 4.
Guidelines
Name the screen in the title and put the qualifier in the caption. One filled button for the one thing this screen exists to finish.
Do not write a sentence into a block that is 132 wide once two actions are in. It truncates in the middle and the half that survives is the half nobody needed.
Use large where the screen is a destination and the title is worth the room, compact where the user is passing through. Keep the back affordance unless there is nowhere to go back to: on Android hardware without a back key it is the only way out of a pushed screen. Decide the actions before the title: the title block is what they leave.