Button

import '@rhds/elements/rh-button/rh-button.js';

<rh-button>Primary</rh-button>

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Button>Primary</Button>
);

rh-context-demo::part(demo) {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--rh-space-lg, 16px);
}

import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';

<rh-context-demo>
  <rh-button danger="">Danger</rh-button>
  <rh-button>Primary</rh-button>
  <rh-button variant="link">Link</rh-button>
  <rh-button variant="secondary">Secondary</rh-button>
  <rh-button variant="secondary" danger="">Secondary Danger</rh-button>
  <rh-button variant="tertiary">Tertiary</rh-button>
  <rh-button variant="close">Close</rh-button>
  <rh-button variant="play">Play</rh-button>
  <rh-button disabled="">Disabled</rh-button>

  <rh-button danger="" icon="information-fill">Danger</rh-button>
  <rh-button icon="information-fill">Primary</rh-button>
  <rh-button variant="link" icon="information-fill">Link</rh-button>
  <rh-button variant="secondary" icon="information-fill">Secondary</rh-button>
  <rh-button variant="secondary" danger="" icon="information-fill">Secondary Danger</rh-button>
  <rh-button variant="tertiary" icon="information-fill">Tertiary</rh-button>
  <rh-button variant="close" icon="information-fill">Close</rh-button>
  <rh-button variant="play" icon="information-fill">Play</rh-button>
  <rh-button disabled="" icon="information-fill">Disabled</rh-button>
</rh-context-demo>

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <Button danger>Danger</Button>
    <Button>Primary</Button>
    <Button variant="link">Link</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="secondary" danger>Secondary Danger</Button>
    <Button variant="tertiary">Tertiary</Button>
    <Button variant="close">Close</Button>
    <Button variant="play">Play</Button>
    <Button disabled>Disabled</Button>
    <Button danger icon="information-fill">Danger</Button>
    <Button icon="information-fill">Primary</Button>
    <Button variant="link" icon="information-fill">Link</Button>
    <Button variant="secondary" icon="information-fill">Secondary</Button>
    <Button variant="secondary" danger icon="information-fill">Secondary Danger</Button>
    <Button variant="tertiary" icon="information-fill">Tertiary</Button>
    <Button variant="close" icon="information-fill">Close</Button>
    <Button variant="play" icon="information-fill">Play</Button>
    <Button disabled icon="information-fill">Disabled</Button>
  </rh-context-demo>
);

#checkboxes {
  display: grid;
  grid-template-columns: min-content 1fr;
}

label { display: block; }

form h2 {
  width: 100%;
}

import '@rhds/elements/rh-button/rh-button.js';
const form = document.getElementById('form');
const fieldset = document.getElementById('fieldset');

/** @this {HTMLFormElement} */
function onSubmit(event) {
  event.preventDefault();
  this.elements.output.textContent = 'Submitted';
}

/** @this {HTMLFormElement} */
function onReset() {
  fieldset.disabled = false;
  this.elements.output.textContent = 'Pending';
}

/** @this{HTMLInputElement} */
function onChange({ target: { checked, dataset: { controls } } }) {
  // eslint-disable-next-line no-console
  console.log(`${controls}.disabled =`, checked);
  const el = document.getElementById(controls);
  if (el) {
    el.disabled = checked;
  }
}

form.addEventListener('submit', onSubmit);
form.addEventListener('reset', onReset);
form.addEventListener('change', onChange);

<form id="form">
  <fieldset id="fieldset">
    <legend>
      rh-button in a <code>&lt;fieldset&gt;</code> element;
      clicking this button must submit the form
    </legend>
    <rh-button id="button" type="submit">Submit</rh-button>
  </fieldset>

  <fieldset id="checkboxes">
    <legend>Use these checkboxes to toggle disabled state</legend>
    <input id="fst" type="checkbox" data-controls="fieldset">
    <label for="fst">Disable fieldset</label>
    <input id="btn" type="checkbox" data-controls="button">
    <label for="btn">Disable rh-button</label>
  </fieldset>

  <fieldset id="outputs">
    <legend>Observe and reset form state</legend>
    <rh-button type="reset">Reset</rh-button>
    <label for="output">Form status:</label>
    <output id="output" name="output">Pending</output>
  </fieldset>
</form>

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <form id="form">
    <fieldset id="fieldset">
      <legend>
        rh-button in a
        <code><fieldset></code>
        element;
        clicking this button must submit the form
      </legend>
      <Button id="button" type="submit">Submit</Button>
    </fieldset>
    <fieldset id="checkboxes">
      <legend>Use these checkboxes to toggle disabled state</legend>
      <input id="fst" type="checkbox" data-controls="fieldset" />
      <label htmlFor="fst">Disable fieldset</label>
      <input id="btn" type="checkbox" data-controls="button" />
      <label htmlFor="btn">Disable rh-button</label>
    </fieldset>
    <fieldset id="outputs">
      <legend>Observe and reset form state</legend>
      <Button type="reset">Reset</Button>
      <label htmlFor="output">Form status:</label>
      <output id="output" name="output">Pending</output>
    </fieldset>
  </form>
);

import '@rhds/elements/rh-button/rh-button.js';

#button-with-icon {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--rh-space-lg, 16px);
}

<section id="button-with-icon">
  <rh-button icon="error-fill" danger="">Danger</rh-button>
  <rh-button icon="information-fill">Primary</rh-button>
  <rh-button icon="external-link" icon-set="microns" variant="link">Link</rh-button>
  <rh-button icon="bug-fill" variant="secondary">Secondary</rh-button>
  <rh-button icon="bug-fill" variant="secondary" danger="">Secondary Danger</rh-button>
  <rh-button icon="close" icon-set="microns" variant="tertiary">Tertiary</rh-button>
  <rh-button icon="close" icon-set="microns" disabled="">Disabled</rh-button>
</section>

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="button-with-icon">
    <Button icon="error-fill" danger>Danger</Button>
    <Button icon="information-fill">Primary</Button>
    <Button icon="external-link" icon-set="microns" variant="link">Link</Button>
    <Button icon="bug-fill" variant="secondary">Secondary</Button>
    <Button icon="bug-fill" variant="secondary" danger>Secondary Danger</Button>
    <Button icon="close" icon-set="microns" variant="tertiary">Tertiary</Button>
    <Button icon="close" icon-set="microns" disabled>Disabled</Button>
  </section>
);

import '@rhds/elements/rh-button/rh-button.js';

#button-variants {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: var(--rh-space-lg, 16px);
}

<section id="button-variants">
  <rh-button danger="">Danger</rh-button>
  <rh-button>Primary</rh-button>
  <rh-button variant="link">Link</rh-button>
  <rh-button variant="secondary">Secondary</rh-button>
  <rh-button variant="secondary" danger="">Secondary Danger</rh-button>
  <rh-button variant="tertiary">Tertiary</rh-button>
  <rh-button variant="close">Close</rh-button>
  <rh-button variant="play">Play</rh-button>
  <rh-button disabled="">Disabled</rh-button>
</section>

import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <section id="button-variants">
    <Button danger>Danger</Button>
    <Button>Primary</Button>
    <Button variant="link">Link</Button>
    <Button variant="secondary">Secondary</Button>
    <Button variant="secondary" danger>Secondary Danger</Button>
    <Button variant="tertiary">Tertiary</Button>
    <Button variant="close">Close</Button>
    <Button variant="play">Play</Button>
    <Button disabled>Disabled</Button>
  </section>
);