UI Catalog: Top Bar Redesign 2025

Improved designs for the main application form top bar, optimized for both PC and mobile. Focus on minimal design, essential functionality, and responsive behavior.

💡 Latest Updates: Added status/lock toggle solutions (7 variations) and re-evaluated bottom action bar design. Status badge + lock button are now merged into intuitive toggle controls.

🎯 Status/Lock Control Variations

7 different approaches to combine status badge and lock button into a single, intuitive control. These can be used in any of the layout proposals below.

STATUS-1: Toggle Switch ⭐⭐⭐

iOS-style toggle switch. Very intuitive - slide to change mode. Clear visual states with icons.

✏️ Edit
✏️
🔒 Lock
Current: Edit Mode
Content Area (Form Inputs, Tables, etc.)

STATUS-2: Segmented Control (iOS-style) ⭐⭐

Tabs-like segmented control. Active segment is highlighted. Common in iOS apps.

Content Area (Form Inputs, Tables, etc.)

STATUS-3: Single State Button ⭐⭐⭐

One button that changes appearance based on current state. Click to toggle. Simple and space-efficient.

Content Area (Form Inputs, Tables, etc.)

STATUS-4: Icon Button Group ⭐

Two buttons as radio group. Active button is highlighted. Clear visual representation.

Content Area (Form Inputs, Tables, etc.)

STATUS-5: Colored Header Background

The entire header bar changes color based on mode. Very visible state indication.

📝 旅費申請✏️ 編集モード
Content Area (Form Inputs, Tables, etc.)

STATUS-6: Checkbox-Style Toggle

Familiar checkbox pattern. Good for accessibility. Clear on/off state.

Content Area (Form Inputs, Tables, etc.)

STATUS-7: Split Dropdown Button

Current status as button label, dropdown to change. Familiar pattern from save buttons.

Edit Mode
Content Area (Form Inputs, Tables, etc.)

✨ NEW: Improved Proposals (Dec 2025)

Based on feedback: merged status/lock controls, re-evaluated bottom action bar, improved mobile UX.

Proposal I: Toggle Switch + Bottom Action Bar ⭐⭐⭐⭐⭐ (PC: 4/5, Mobile: 5/5)

iOS-style toggle switch for status with icons, profile icon dropdown, bottom action bar for thumb-zone optimization on mobile

Editing
✏️

✨ Strengths: Intuitive iOS-style toggle, bottom bar optimized for mobile thumb reach, profile consolidates user functions.
📱 Mobile: Perfect thumb zone, large touch targets (44px), persistent visibility while scrolling.
💻 PC: Clean minimal top bar, familiar toggle pattern.

Content Area (Form Inputs, Tables, etc.)

Proposal J: Segmented Control + Profile Dropdown ⭐⭐⭐⭐ (PC: 5/5, Mobile: 4/5)

iOS-style segmented control for status, integrated profile dropdown, top action bar with overflow menu on mobile

✨ Strengths: iOS-familiar segmented control, clean single-row layout, profile integrates all user functions.
📱 Mobile: Overflow menu pattern (⋯), large touch targets, reduced clutter.
💻 PC: All actions visible, familiar tab-like control for status.

Content Area (Form Inputs, Tables, etc.)

🌟 Proposal K: Single State Button + Adaptive Layout (HIGHLY RECOMMENDED) ⭐⭐⭐⭐⭐ (PC: 5/5, Mobile: 5/5)

Best of both worlds: Single intuitive state button, top bar on PC, bottom action bar on mobile for optimal thumb reach

🌟 HIGHLY RECOMMENDED - Best Overall Solution:
✨ Key Innovation: Single state button that shows current mode AND action ("Editing - Click to Lock" / "Locked - Click to Edit") - no confusion!
📱 Mobile: Perfect! Status bar at top, actions at bottom in thumb zone. Large 44px touch targets, no scrolling needed.
💻 PC: Clean 2-row layout, all actions visible, familiar pattern.
🎨 Visual Feedback: Color-coded status bar (green border when locked, orange when editing), intuitive icons (🔒/✏️).
🔄 Adaptive: Same HTML, different CSS positioning based on screen size - easy to implement!

Content Area (Form Inputs, Tables, etc.)