Outline Tabs
Tabs wrapped in a light border that frames each trigger and the active panel. Suits forms or profile screens that need clear structure between grouped fields.
Tabs wrapped in a light border that frames each trigger and the active panel. Suits forms or profile screens that need clear structure between grouped fields.
Search blocks by description or jump to a page.
Outline Tabs renders a centered row of three trigger buttons, each wrapped in a two-pixel border. The inactive triggers carry a muted border; the active one switches to the primary color border and text so the selection is unmistakable without a filled background. Below the trigger row sits the content panel, also framed in a matching border, with a heading and a short description paragraph inside.
The three sections (Account, Password, Settings) are independent of each other. You can rename the triggers and panel headings, swap in longer descriptive text, fill each panel with form fields or data tables, or add and remove sections to suit however many grouped areas your workspace needs.
Reach for this layout when a settings or configuration screen needs clear visual separation between grouped fields without heavy chrome. In a project management workspace the bordered frame signals that each section is its own unit, which helps users orient quickly across Account, Notifications, and Integrations panes. The outline treatment sits between the quieter Minimal Tabs and the more visually prominent Card Tabs, making it a good default for settings views that need structure but not decoration.
A natural flow around it on a Components page:
Before
After
Each section is a self-contained slot you can fill with any content that fits inside a bordered panel. A few ways to adapt the block:
Tip: keep trigger labels short (one or two words) so the border frames stay evenly sized and the active border color reads cleanly across all states.