{% trans "Rectangular label for type tags, counts, and category markers. Always uppercase. Use in tables, KV rows, and anywhere data needs a compact inline label." %}
{% trans "Usage" %}
<!-- Tinted (default) -->
<span class="dcr-badge dcr-badge--warning">hash</span>
<!-- Solid -->
<span class="dcr-badge dcr-badge--solid dcr-badge--danger">culprit</span>
<!-- Variants: (none) · success · warning · danger · info · muted · purple · indigo -->{% trans "Fully-rounded chip for live status and state indicators. Sentence-case - write naturally, not in ALL CAPS. Add " %}__dot{% trans " for a coloured dot that always matches the pill's current colour." %}
{% trans "Usage" %}
<!-- Tinted with dot -->
<span class="dcr-pill dcr-pill--success">
<span class="dcr-pill__dot"></span>Connected
</span>
<!-- Tinted without dot -->
<span class="dcr-pill dcr-pill--warning">Degraded</span>
<!-- Solid -->
<span class="dcr-pill dcr-pill--solid dcr-pill--success">Active</span>
<!-- Variants: (none) · success · warning · danger · info · muted · purple · indigo -->{% trans "Solid fill by default. Add " %}--ghost{% trans " for transparent background + coloured border. Place any " %}<svg class=\"dcr-btn__icon\">{% trans " as a direct child - flex gap handles spacing automatically." %}
{% trans "Solid (default)" %}
{% trans "Ghost (--ghost)" %}
{% trans "Sizes, icons, disabled" %}
{% trans "Usage" %}
<!-- Solid (default) -->
<button class="dcr-btn dcr-btn--primary">Search</button>
<button class="dcr-btn dcr-btn--danger">Delete</button>
<!-- Ghost / outlined -->
<button class="dcr-btn dcr-btn--primary dcr-btn--ghost">Cancel</button>
<button class="dcr-btn dcr-btn--ghost">Reset all filters</button>
<!-- With icon -->
<button class="dcr-btn dcr-btn--primary">
<svg class="dcr-btn__icon" …></svg> Search
</button>
<!-- Icon-only -->
<button class="dcr-btn dcr-btn--ghost dcr-btn--icon-only" aria-label="Refresh">
<svg class="dcr-btn__icon" …></svg>
</button>
<!-- Small -->
<button class="dcr-btn dcr-btn--primary dcr-btn--sm">Save</button>{% trans "All " %}dcr-btn{% trans " classes work on " %}<a>{% trans " elements unchanged. Use this when the action navigates to a new page (export, open detail, download)." %}
{% trans "Solid" %}
{% trans "Ghost (--ghost)" %}
{% trans "With icon · small · icon-only" %}
{% trans "Usage" %}
<!-- Any dcr-btn class works on <a> -->
<a href="/reports/export/" class="dcr-btn dcr-btn--primary">Export CSV</a>
<a href="/workers/" class="dcr-btn dcr-btn--ghost">View all</a>
<!-- With icon -->
<a href="/reports/export/" class="dcr-btn dcr-btn--primary">
<svg class="dcr-btn__icon" …></svg> Export CSV
</a>
<!-- Icon-only -->
<a href="/signals/post_save/" class="dcr-btn dcr-btn--ghost dcr-btn--icon-only" aria-label="Open">
<svg class="dcr-btn__icon" …></svg>
</a>{% trans "A button that reveals a positioned action menu on click. Wrap a " %}dcr-btn{% trans " trigger and a " %}dcr-dropdown__menu{% trans " inside " %}dcr-dropdown{% trans ". Toggle " %}is-open{% trans " + " %}aria-expanded{% trans " via JS. Add " %}dcr-dropdown--right{% trans " to right-align the menu." %}
{% trans "Usage" %}
<div class="dcr-dropdown">
<button class="dcr-btn dcr-dropdown__trigger"
aria-haspopup="true" aria-expanded="false"
onclick="dcr_toggleDropdown(this)">
Actions
<svg class="dcr-btn__icon dcr-dropdown__caret" …></svg>
</button>
<div class="dcr-dropdown__menu" role="menu">
<a href="#" class="dcr-dropdown__item" role="menuitem">View details</a>
<a href="#" class="dcr-dropdown__item" role="menuitem">Edit</a>
<hr class="dcr-dropdown__divider">
<button class="dcr-dropdown__item dcr-dropdown__item--danger" role="menuitem">Delete</button>
</div>
</div>
<!-- right-aligned menu -->
<div class="dcr-dropdown dcr-dropdown--right"> … </div>{% trans "Navigation link placed above the page header on detail views." %}
{% trans "Usage" %}
<a href="/cache/keys/" class="dcr-back-link">Back to all keys</a>