Button Hybrid

About

Overview

A button triggers an action — submitting a form, opening a dialog, deleting a record. RenDS gives you one component with seven visual variants (primary, secondary, ghost, outline, danger, link, accent), three sizes, and a built-in loading state that flips the button to aria-busy="true" and disables interaction without you wiring anything.

Every variant ships with a 44 px minimum touch target (Apple HIG), a visible focus ring, hover/active feedback that respects prefers-reduced-motion, and AA contrast in both light and dark mode.

When to use

• To trigger an action on the current page (submit, save, delete, copy, run).
• To open or close an overlay (dialog, popover, menu).
• For a primary CTA, group it with a secondary or ghost button — never two primaries side by side.

When not to use

• For navigation to a different page or a different URL — that's <a> or ren-link. A button that navigates breaks browser conventions (no middle-click open, no copy-link).
• For an inline call-to-read-more inside body text — use the link variant only when a button is genuinely needed; otherwise reach for ren-link.
• For a binary state choice — that's ren-toggle or a checkbox.

Structure

Anatomy

A button has up to four visible parts. Only the label is mandatory — the rest are optional and combine freely.

Live

Demo

The default button — primary variant, medium size. Tab to it, press Space or Enter to fire the click handler.

<!-- CSS-only -->
<button class="ren-btn ren-btn-primary" type="button">Primary action</button>

<!-- Web Component (same output, attribute-driven) -->
<ren-button variant="primary">Primary action</ren-button>

Catalog

Variants

Pick the variant that matches the action's weight, not its category. Primary for the one most-likely action on the screen, secondary for everything else, danger for destructive, ghost when the button has to disappear into the chrome.

Reference

API

Two parallel surfaces. Pick the one that matches your codebase: CSS classes for static markup, the custom element for declarative attributes you can flip at runtime.

CSS classes

Web Component attributes

Set on the <ren-button> element. All are reactive — flipping them in JS re-renders the underlying button.

JS properties

The RenButton class exposes getters/setters that mirror the boolean attributes. Useful when you'd rather flip a property than toggle an attribute.

Inclusive by default

Accessibility

Every button passes WCAG 2.1 AA in both modes and every variant. The component does most of the work for you, but a few things are still your call.

Keyboard

ARIA wiring

• The button has role="button" implicitly via the native <button>. No need to set it.
• For icon-only buttons, set aria-label on the button. Decorative icons inside should carry aria-hidden="true".
• For loading state, the component sets aria-busy="true" automatically. Screen readers will announce the state change.
• For disabled state, both disabled and aria-disabled="true" are set. Disabled buttons are skipped in tab order; if you need a focusable-but-inert button (rare), use aria-disabled alone and handle the click guard yourself.
• For toggle buttons (a button that flips between two states), add aria-pressed="true" or "false". The group example above uses this.

Screen reader announcements

• "Add to cart, button" — for a regular labelled button.
• "Search, button, busy" — when loading is set.
• "Save, button, dimmed" (or similar) — when disabled is set.
• "Week, button, pressed" — for a toggled button in a group.

Touch and pointer

• Default and large sizes meet the 44 × 44 px minimum touch target. The small size is below that and should only be used in dense desktop UI (toolbars, table cells).
• The press-down feedback (a scale(0.97) on :active) respects prefers-reduced-motion via the semantic motion tokens — it stays subtle for users who request reduced motion.
• Hover styles never replace focus styles. A keyboard user always sees a focus ring on the focused button, even when a different button is hovered.

Recipes

Examples

Common patterns that combine the variants above with other RenDS primitives. Copy the markup, swap the labels.

Primary + secondary pair

The classic "confirm and cancel" pairing. Primary on the right (or last), secondary on the left.

<div class="ren-cluster">
  <button class="ren-btn ren-btn-secondary" type="button">Cancel</button>
  <button class="ren-btn ren-btn-primary"   type="button">Save changes</button>
</div>

Destructive confirmation

For irreversible actions. The danger variant signals stakes; pair with secondary, never with another colored variant.

<div class="ren-cluster">
  <button class="ren-btn ren-btn-secondary" type="button">Keep account</button>
  <button class="ren-btn ren-btn-danger"    type="button">Delete account</button>
</div>

Loading from JS

Flip loading on submit, flip it back when the request resolves.

const btn = document.querySelector('ren-button#demo-load');
btn.addEventListener('click', async () => {
  btn.loading = true;
  try {
    await fetch('/api/save', { method: 'POST' });
  } finally {
    btn.loading = false;
  }
});

Icon-only in a toolbar

Ghost icon buttons disappear into chrome until hovered. Always set aria-label.

<div class="ren-cluster">
  <button class="ren-btn ren-btn-ghost ren-btn-icon" type="button" aria-label="Bold">
    <svg ... aria-hidden="true">...</svg>
  </button>
  <!-- repeat for italic, underline -->
</div>

Segmented control

Three buttons in a group, one pressed. Manage aria-pressed from JS as the user clicks.

<div class="ren-btn-group" role="group" aria-label="View by">
  <button class="ren-btn ren-btn-secondary" type="button">Day</button>
  <button class="ren-btn ren-btn-secondary" type="button" aria-pressed="true">Week</button>
  <button class="ren-btn ren-btn-secondary" type="button">Month</button>
</div>

Full-width on mobile

Stretch the primary CTA on small screens for comfortable thumb reach.

<button class="ren-btn ren-btn-primary ren-btn-lg ren-btn-full" type="button">
  Continue
</button>