元件

按鈕與輸入控制項

所有控制項共用相同材質與狀態順序。

所有控制項

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

Collection nameShown above the cards. Sort by

Width · 40%

Show captions Comfortable Compact Sync

托盤標頭中的互斥選項

托盤標頭的分段控制項會改變示範主體的實際 utility。

Cross-axis alignment

Subject
Taller comparison
Context

Selection changes the actual alignment utility on the flex parent. Scroll the preview horizontally when space is limited.

視窗條件

預設值會在真實 iframe 中跨越 sm 斷點，按鈕內距隨該視窗變化。

Responsive button padding

檢視區

使用於語法教學.

用法與介面

控制項使用原生元素，各自只有一個根 class；變體與尺寸由資料屬性表示，狀態則來自原生偽類別與 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 包住具名群組：variant="segmented" 會呈現 ui-segmented，以帶有 aria-pressed 的按鈕提供互斥選項；一般預設則將混合控制項排成一列。請透過 Demo controls 放在托盤標頭，不可放進示範版面。

<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>

#相關文件檢視

每個選項用來顯示相關面板時，請使用文件框架的 Segments。所有面板都會保留在 HTML 中；沒有 JavaScript 或列印時，每個檢視都會連同標籤一起顯示。

<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>

ui-range 的填色跟隨 --value；請將輸入值換算成範圍內的百分比後設定。