Feature Panels
Feature panels are UI surfaces that group related controls for a product feature, including dynamic behavior
and wizard-style workflows.
Choose the right pattern
| Pattern |
Blocks app |
Best for |
| Feature panel |
No |
Settings, wizards, side panels with multiple sections |
| Dialog |
Yes (modal) |
Short confirmations or focused tasks |
| Collapse |
No |
Progressive disclosure within a page or panel |
General layout principles
- Top-to-bottom, left-to-right workflow progression.
- Organize controls into logical sections with bold section titles.
- Number sections when the workflow is strictly ordered.
- Hide borders on section headers and sub-panels; use spacing instead of shaded backgrounds.
- Use layout controls so alignment holds on resize.
- Prefer disabling over hiding, except when licensing or another control dictates availability.
Sectioning and expandability
- Use expandable sections only when many controls are not all visible at once.
- Avoid controls on section headers unless content cannot be determined before entering the section.
- Expandable headers match default section header height.
Control alignment and spacing
- Controls consistently aligned within each panel.
- Standalone buttons align with left/right margins of other controls.
- Controls inset from panel edges per Spacing foundation (9px panel inline).
- Buffer space at top and bottom of subsections.
Single-page panels
- Earlier subsections may trigger layout changes in later ones (resize, visibility).
- Changes must not propagate upward — later sections must not affect earlier ones.
- Primary action button near the last control subsection, not at the bottom of the panel shell.
Multi-page (wizard) panels
- Each page may have a different layout; same top-down change logic as single-page panels.
- Navigation and primary action buttons near the bottom of the panel.
- Primary button visible when the panel first loads.
Buttons in panels
- Only one primary action button per panel.
- Placement follows alignment rules; maintain visibility throughout the workflow.
Example
Advanced options