Tab & Segmented Control

Design two related controls: a tab bar for switching views and a segmented control for filtering within the current view. Keep the difference clear in both layout and behavior. Tabs should feel like navigation between sections; segmented controls should feel like mutually exclusive filters that update content in place.

Build each component with 3–5 options and a clearly selected item. Show the full interaction set: default, hover, pressed, focus, and disabled. Include at least one example with long labels and one with icons so spacing, truncation, and alignment are solved instead of implied.

Show how each control behaves when space is tight. If labels do not fit, decide whether they wrap, truncate, or scroll, and make that choice visible in the design. The selected state should hold up in light and dark or high-contrast styling if you choose to include them, but the main requirement is that the control reads quickly and the active choice is unmistakable.

Inject personality into your tabs or segments by using distinctive icons or color coding. This helps users remember their function at a glance.