Button

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

<rh-button>Primary</rh-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>

#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 '@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 '@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>