Notch
/NOTCH/ · noun · SYSTEM pattern · #082
The black cutout at the top edge of the screen that holds the front camera and Face ID sensors. The screen wraps around it, so the status bar is split into two “ears”, one on each side.
Also called: display notch, camera cutout, sensor housing.
You might call it
- “the notch on iPhone”
- “the black cutout at the top of the screen”
- “the bit at the top that covers the screen”
- “the camera bump at the top of the display”
- “the ears at the top of my phone screen”
…its name is Notch.
Common questions
What is the notch on iPhone called?
Most people call it the notch; Apple’s design guidelines call it the sensor housing. It holds the TrueDepth camera for Face ID and selfies. iPhone X through iPhone 14 and 14 Plus have it, as do the budget iPhone 16e and 17e; other newer models use the Dynamic Island.
Notch vs punch-hole camera: what is the difference?
Both make room for a front camera. A notch is a black tab cut into the top edge, wide enough for Face ID sensors. A punch hole is a small round cutout inside the screen with only the camera, common on Android phones. Developers handle both as a display cutout.
In code
| SwiftUI | .ignoresSafeArea() .safeAreaInset(edge:) |
|---|---|
| UIKit | safeAreaInsets safeAreaLayoutGuide |
| Android | DisplayCutout WindowInsetsCompat.Type.displayCutout() |
| Flutter | SafeArea MediaQuery.paddingOf() |
| Web (CSS) | viewport-fit=cover env(safe-area-inset-top) |
Prompt for your AI coding tool
Make this screen safe around the notch and other display cutouts: let backgrounds extend under it, but keep all text, important images and controls inside the safe area — including in landscape, where the notch sits on the left or right edge. Test on a notched iPhone, a Dynamic Island iPhone and an Android phone with a punch-hole camera.
More UI words to use when vibe coding →
Related patterns
All the parts of a phone and computer screen, named →