Navigation / Buttons & inputs
Control
Quiet, consistent controls for the few actions a document needs.
Basic usage
- Chip
- Table
HTML
<div class="actions">
<a class="btn btn-primary btn-lg" href="../../start/">Quick start →</a>
<a class="btn btn-lg" href="../">Back to the list</a>
<button class="btn btn-quiet" data-dd-theme-toggle data-dd-enhance hidden>◐</button>
</div>
<label>Filter by name <input class="input" type="search" data-dd-filter="#control-items" placeholder="e.g. Chip"></label>
<ul class="rows" id="control-items"><li class="row">Chip</li><li class="row">Table</li></ul>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.btn / .btn-quiet | Standard or quiet buttons. Use links for navigation. |
.btn-primary / .btn-lg | The primary action, or a control with more generous spacing. |
.input / .input-block | A standard input, or a full-width input. |
data-dd-theme-toggle | Cycles through automatic, light, and dark themes. |
data-dd-enhance hidden | Shows a control only after the optional script has initialized. |
Usage notes
Give inputs labels and icon-only buttons accessible names. Preserve the keyboard focus ring.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.