Tab Bars — HIG Playground

Explore iOS Tab Bar tab count, badges, and icon styles interactively. Change properties in the control panel to see them reflected on the iPhone screen instantly.

9:41

●●●● WiFi 🔋

Home

🎨

Featured

Top picks for you

›

⭐

Popular

Trending this week

›

🌱

New Arrivals

Just added

›

Recent

🎵

Playlists

›

📖

Reading List

›

🔍 Search

Browse Categories

Music

Podcasts

Videos

Books

Library

💾

Downloads

3 items

›

🔖

Bookmarks

12 items

›

❤️

Favorites

8 items

›

🕒

History

24 items

›

Profile

John Doe

john@example.com

⚙️

Settings

›

🔔

Notifications

›

🔒

Privacy

›

Notifications

💬

New message from Alex

2 minutes ago

🎉

You got a new achievement!

1 hour ago

📦

Update available

Yesterday

⚠️ HIG Violation: Improper tab bar

📚 HIG Guidelines — Try It Yourself

✓ Do — Good Example

✗ Don't — Bad Example

✓ Do This

Use a tab bar to organize content at the app level
Use SF Symbols for tab icons for consistency
Keep tab labels short (one or two words)
Use between 3 and 5 tabs
Use badges sparingly to indicate new content
Make every tab accessible from any other tab

✗ Don't Do This

Don't use more than 5 tabs on iPhone
Don't remove or disable tabs based on context
Don't use a tab bar for actions (use a toolbar instead)
Don't use overly complex or custom icons
Don't duplicate tab bar functionality in the content area

👆 See the bad pattern in the iPhone preview above

Tint Color

Show Badge

Badge Count

Badge on Tab

2nd Tab

3rd Tab

SwiftUI Code