Components

Buttons and inputs

Controls share one material: a raised face that lifts half a pixel on hover, sinks into a well when pressed and always shows an ink focus ring. Hue never expresses state.

Buttons

Default, primary and quiet; hover lifts, pressing sinks

hover
pressed
focus
data-size="sm"
The static hover and pressed specimens use data-state; real buttons use native :hover, :active and :focus-visible.

Choices and fields

Selected segments rise inside a sunken track; fields float back to the sheet on focus

Exclusive choices in a tray head

A segmented control in the tray head changes the actual utility on the specimen.

Cross-axis alignment

01
02
03
  • Subject
  • Taller comparison
  • Context
Selection changes the actual alignment utility on the flex parent. Scroll the preview horizontally when space is limited.

Related document views

Arrow keys move between views; Home and End reach the first and last; Tab moves into the selected panel.

Overview

A short explanation stays beside the example.

Viewport conditions

The presets cross the sm breakpoint inside a real iframe; the button padding follows that viewport.

Responsive button padding

Used on the Syntax Tutorial.

Usage and interface

Controls are native elements with one root class each; variants and sizes are data attributes and state comes from native pseudo-classes and ARIA.

<button type="button" class="ui-button">Save</button><button type="button" class="ui-button" data-variant="primary">Publish</button><button type="button" class="ui-button" data-variant="quiet" data-size="sm">Replay</button><button type="button" class="ui-button" data-shape="icon" aria-label="Add">…</button><div class="ui-segmented" role="group" aria-label="View">  <button type="button" aria-pressed="true">Preview</button>  <button type="button" aria-pressed="false">Code</button></div><label class="ui-field">Name<input class="ui-input"><span class="ui-field-hint">…</span></label><select class="ui-select">…</select><input class="ui-range" type="range" style="--value: 40%"><label class="ui-check"><input type="checkbox">Show captions</label><label class="ui-check"><input type="checkbox" role="switch" class="ui-switch">Sync</label>

DemoControls wraps a labelled group: variant="segmented" renders ui-segmented for exclusive choices whose buttons carry aria-pressed; the plain default lays mixed controls out in a row. Put controls in the tray head with Demo controls, never inside the demonstrated layout.

<Demo title="Cross-axis alignment" controls={  <DemoControls label="Cross-axis alignment" variant="segmented">    <button type="button" aria-pressed={alignment === 'items-flex-start'}>Start</button>    <button type="button" aria-pressed={alignment === 'items-center'}>Center</button>  </DemoControls>}>…</Demo>

#Related document views

Use the document shell's Segments when each choice reveals a related panel. Every panel remains in the HTML; without JavaScript, and when printing, all views appear with their labels.

<Segments label="Document view example">{[  { name: 'Overview', content: <p>A short explanation stays beside the example.</p> },  { name: 'Details', content: <p>Supporting details remain available.</p> }]}</Segments>

The ui-range fill follows --value; set it with the input’s value as a percentage of its range.