Design system · Component review 12

Demo controls

Controls should make one change easy to test while staying outside the layout being taught. Compare the Guide’s existing viewport switch with the shared alignment controls and a more deliberate grouped treatment.

Approved default direction: DemoControls variant="segmented" provides the grouped appearance for exclusive choices. Mixed slider and action toolbars keep the plain default. Use a mouse or keyboard to switch alignment; the selected button keeps aria-pressed, and the flex parent receives the actual Master CSS class.

Select an alignment

Each shared treatment changes the same three items. The original Guide shows its own viewport choices, which already communicate state clearly.

Original Guide

Simple outlined viewport choices

Viewport: 833px

The Syntax Tutorial keeps two compact buttons and a live viewport status. These native controls remain in the Guide.

Shared plain fieldset and buttons

Cross-axis alignment

Selection changes the actual alignment utility on the flex parent.

The fieldset gives the group an accessible name; small outlined buttons expose the active choice with aria-pressed.

Adopted

Compact segmented control

Cross-axis alignment

Selection changes the actual alignment utility on the flex parent.

An opt-in segmented variant gives exclusive choices a restrained group boundary, larger targets and a distinct selected segment.

Actual Guide use

The Syntax Tutorial switches a real iframe across the sm breakpoint. The resulting button padding changes inside its own viewport.

Open /guide/syntax-tutorial