Safe area
Pads content clear of the device notch and home-indicator regions using the safe-area tokens. Each edge is opt-in and the padding is additive, so a component keeps its own padding and still clears the inset.
{/* clear the home indicator below a bottom bar */}<SafeArea bottom> <TabBar aria-label="Sections">…</TabBar></SafeArea>
{/* clear both notch and indicator */}<SafeArea top bottom>…</SafeArea>How it resolves
The insets come from the --flab-safe-* tokens, which wrap env(safe-area-inset-*) with a 0 fallback. On a desktop browser or a device without a notch they resolve to zero, so a SafeArea is inert there and only adds room where the hardware needs it. In Flab Mobile the header and tab bar already apply the top and bottom insets, so reach for SafeArea directly only for custom fixed chrome.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
top | boolean | false | Pad the top inset (notch). |
bottom | boolean | false | Pad the bottom inset (home indicator). |
left | boolean | false | Pad the left inset. |
right | boolean | false | Pad the right inset. |