VISUAL REFERENCE / COPYABLE HTML
Browse real components rendered with Bronto UI itself. Filter by purpose, inspect the result, and copy the markup. This is a curated entry point; the full API remains in the documentation.
FOUNDATIONS
Primary and quieter actions with the same visual grammar.
<button class="ui-button" type="button">Create item</button>
<button class="ui-button ui-button--subtle" type="button">Secondary</button>
<button class="ui-button ui-button--ghost" type="button">Ghost</button>COMPOSITION
Group related content without prescribing its data model.
Healthy and up to date.
<article class="ui-card" style="max-width:340px">
<span class="ui-eyebrow">Workspace</span>
<h3 style="margin:8px 0">Project overview</h3>
<p class="ui-muted" style="margin:0">Healthy and up to date.</p>
</article>STATUS
Communicate meaning in a compact, scannable treatment.
<span class="ui-badge ui-badge--success">Healthy</span>
<span class="ui-badge ui-badge--warning">Pending</span>
<span class="ui-badge ui-badge--danger">Blocked</span>
<span class="ui-badge ui-badge--accent">New</span>STATUS
A state vocabulary for jobs, services, and other workflows.
<span class="ui-status"><span class="ui-dot ui-dot--live"></span> Online</span>
<span class="ui-status"><span class="ui-dot ui-dot--warning"></span> Degraded</span>
<span class="ui-status"><span class="ui-dot ui-dot--danger"></span> Down</span>FORMS
Labeled, semantic form controls that work with the browser.
<label class="ui-field" style="width:min(100%,340px)">
<span class="ui-label">Workspace name</span>
<input class="ui-input" placeholder="My project" type="text" />
</label>FORMS
Native checkbox state with a legible custom track.
<label class="ui-switch">
<input type="checkbox" role="switch" checked />
<span class="ui-switch__track"><span class="ui-switch__thumb"></span></span>
<span>Enable notifications</span>
</label>STATUS
Operational feedback using accessible semantic colors.
Update available
New changes are ready for review.
<div class="ui-alert ui-alert--info">
<p class="ui-alert__title">Update available</p>
<p class="ui-alert__body">New changes are ready for review.</p>
</div>DATA
Densely presented values with contextual change.
<div class="ui-statgrid">
<div class="ui-stat">
<span class="ui-stat__label">Requests</span>
<span class="ui-stat__value">24.8k</span>
<span class="ui-stat__delta is-pos">▲ 8%</span>
</div>
<div class="ui-stat">
<span class="ui-stat__label">Latency</span>
<span class="ui-stat__value">42ms</span>
<span class="ui-stat__delta">— steady</span>
</div>
</div>DATA
Compare rows and status without introducing a table framework.
| Job | Status |
|---|---|
| daily-sync | Ready |
| export | Queued |
<div class="ui-table-wrap">
<table class="ui-table ui-table--dense">
<caption class="ui-visually-hidden">Recent job status</caption>
<thead><tr><th>Job</th><th>Status</th></tr></thead>
<tbody>
<tr><td>daily-sync</td><td><span class="ui-badge ui-badge--success">Ready</span></td></tr>
<tr><td>export</td><td><span class="ui-badge ui-badge--warning">Queued</span></td></tr>
</tbody>
</table>
</div>STATUS
Track work without relying on color alone.
<div class="ui-progress" role="progressbar" aria-label="Import progress"
aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"
style="width:100%;max-width:360px">
<div class="ui-progress__bar" style="--value:64"></div>
</div>COMPOSITION
Indicate position in an interface hierarchy.
<nav aria-label="Breadcrumb">
<ol class="ui-breadcrumb">
<li class="ui-breadcrumb__item"><a href="#main">Projects</a></li>
<li class="ui-breadcrumb__item"><a href="#main">Team</a></li>
<li class="ui-breadcrumb__item" aria-current="page">Overview</li>
</ol>
</nav>FOUNDATIONS
Small categorical labels for filters and identity.
<span class="ui-chip">Frontend</span>
<span class="ui-chip ui-chip--accent">Active</span>
<span class="ui-chip ui-chip--dense">Development</span>STATUS
Communicate placeholder structure while content loads.
<div style="width:100%;max-width:300px;display:grid;gap:10px">
<div class="ui-skeleton" style="height:1.5rem;width:70%"></div>
<div class="ui-skeleton" style="height:.85rem;width:100%"></div>
<div class="ui-skeleton" style="height:.85rem;width:82%"></div>
</div>FOUNDATIONS
A compact collection for content classification.
<ul class="ui-tags">
<li class="ui-tag ui-tag--accent">design</li>
<li class="ui-tag">systems</li>
<li class="ui-tag">css</li>
</ul>COMPOSITION
A quieter alternative to a raised card.
One focused area of related information.
<div class="ui-panel" style="width:100%;max-width:350px">
<span class="ui-eyebrow">Context</span>
<p style="margin:.5rem 0 0">One focused area of related information.</p>
</div>DATA
Concise labels and values for an inspector or report.
<dl class="ui-key-value">
<div><dt>Runtime</dt><dd>Containers</dd></div>
<div><dt>Status</dt><dd>Reconciled</dd></div>
</dl>DATA
Use a meter for a measurement, not for task progress.
<div class="ui-meter ui-meter--success" role="meter" aria-label="Coverage"
aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"
style="width:100%;max-width:330px">
<span class="ui-meter__fill" style="--value:72"></span>
</div>COMPOSITION
Show the current step in a short ordered process.
<ol class="ui-steps" style="width:100%;max-width:360px">
<li class="ui-steps__item ui-steps__item--done">Connect</li>
<li class="ui-steps__item" aria-current="step">Review</li>
<li class="ui-steps__item">Confirm</li>
</ol>FOUNDATIONS
Small operator initials without requiring an image asset.
<span class="ui-avatar" role="img" aria-label="Platform operator">PO</span>
<span class="ui-avatar ui-avatar--sm" role="img" aria-label="Service owner">SO</span>FOUNDATIONS
Render keyboard hints with semantic keycap elements.
<span class="ui-shortcut">
<kbd class="ui-kbd">Ctrl</kbd>
<span class="ui-shortcut__sep">+</span>
<kbd class="ui-kbd">K</kbd>
</span>No matching components. Try a broader search or choose All.