Skip to content
Larasby Kotek

Component

Top bar

The screen header: an optional back link, the title in Katibeh, and optional status, help and settings at the trailing edge.

TopBar in Kotek/Core/UI/Components.swift

Preview

Choose your gangsa

3 saved
Back, title, status and actions

Specs

Title
Katibeh 30pt, uppercase, 1.5pt tracking (compact 22pt)
Back
System chevron 16pt semibold + SF Pro 16pt
Status
SF Pro 13pt medium, TitleText
Icons
19pt glyphs in 44 × 44 targets, with accessibility labels
Padding
24pt horizontal, 18pt top, 12pt bottom
Divider
None. Space separates the bar from the content.

Usage

Do

  • Keep the title short; it scales down to 70% before it truncates.
  • Label every icon-only button for VoiceOver.

Don't

  • Add a hairline under the bar.
  • Set the back link in Katibeh; it's interface, not voice.