Component examples

<button type="button" class="primary" data-action="save">Save changes</button>

<a href="#main-content">View the first-screen example</a>

<button type="button" aria-label="Close details"><span aria-hidden="true">×</span></button>

<label for="query">Search inventory</label><input id="query" type="search" aria-describedby="query-hint"><p id="query-hint">Search by name or code.</p>

<label class="choice"><input type="checkbox">Include archived items</label>

<fieldset><legend>Layout</legend><label class="choice"><input type="radio" name="layout" value="list" checked>List</label><label class="choice"><input type="radio" name="layout" value="cards">Cards</label></fieldset>

<label class="choice"><input type="checkbox" role="switch">Send the follow-up</label>

<label for="density">Density</label><select id="density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select>

<nav aria-label="Item sections"><a href="#tabs" aria-current="page">Details</a> <a href="#table">History</a></nav>

<fieldset class="segments"><legend>Inventory view</legend><label class="choice"><input type="radio" name="segment" value="list" checked>List</label><label class="choice"><input type="radio" name="segment" value="cards">Cards</label></fieldset>

<details><summary>Review deletion consequences</summary><p>This permanently deletes the draft.</p><button type="button" data-open="dialog-demo">Open confirmation</button></details><dialog id="dialog-demo" aria-labelledby="dialog-title"><h3 id="dialog-title">Delete draft?</h3><p>This permanently deletes the draft.</p><form method="dialog"><button value="cancel">Cancel</button><button value="confirm">Delete draft</button></form></dialog>

<button type="button" data-open="drawer-demo">Open item details</button><dialog id="drawer-demo" class="drawer" aria-labelledby="drawer-title"><h3 id="drawer-title">Drill press</h3><p>Available for supervised use.</p><form method="dialog"><button>Close</button></form></dialog><noscript><p>Drill press: available for supervised use.</p></noscript>

<details><summary>More actions for Drill press</summary><a href="#table">View history</a><button type="button" data-action="archive">Archive</button></details>

<div class="table-scroll" role="region" aria-label="Inventory" tabindex="0"><table><caption>Inventory</caption><thead><tr><th scope="col">Item</th><th scope="col">Status</th></tr></thead><tbody><tr><td>Drill press</td><td>Available</td></tr></tbody></table></div>

<nav aria-label="Pagination"><span>1–24 of 248</span><button type="button" disabled>Previous</button><span>Page 1 of 11</span><button type="button" data-page-next>Next</button></nav>

<span class="pill">Available</span>

<div class="empty"><p>No items match your filters. Clear filters above to see all inventory.</p><button type="button" data-clear-filters>Clear filters</button></div>

<button type="button" data-toast>Archive sample item</button><aside class="toast-list" aria-label="Notifications"></aside>

<section aria-label="Inventory loading" aria-busy="true"><p role="status">Loading inventory…</p><div class="placeholder" aria-hidden="true"></div><label for="upload-progress">Uploading evidence</label><progress id="upload-progress" max="100" value="40">40%</progress></section>