Component

Dialog

A real dialog element, with a jelly panel inside.

Classes

Class	Type
modal	Component	The dialog element.
modal-panel	Part	The panel.
modal-sm	Size	Less padding. The width stays the same.
modal-lg	Size	More padding. The width stays the same.
btn-surface	Part	The close control. Two washes sit on it and swap when pressed.
btn-surface-sm	Size	A smaller close control.
btn-surface-lg	Size	A larger close control.
primary	Color	Put the color on the panel. It tints the panel and the close control. With no color, both use the neutral surface.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Open and close

Open it with showModal() on the dialog element. The form method="dialog" closes it. With no color, the close control uses the neutral surface.

<button class="btn" type="button">Open</button>
<dialog class="modal">
  <div class="modal-panel">
    <form method="dialog">
      <button class="btn-surface" type="submit" aria-label="Close">×</button>
    </form>
    <h2>A note</h2>
    <p>Surface panel.</p>
  </div>
</dialog>

Colors

The color goes on modal-panel. It tints the panel and the close control.

<div class="modal-panel primary">
  <h2>Primary</h2>
</div>
<div class="modal-panel secondary">
  <h2>Secondary</h2>
</div>
<div class="modal-panel tertiary">
  <h2>Tertiary</h2>
</div>
<div class="modal-panel neutral">
  <h2>Neutral</h2>
</div>
<div class="modal-panel success">
  <h2>Success</h2>
</div>
<div class="modal-panel error">
  <h2>Error</h2>
</div>
<div class="modal-panel warning">
  <h2>Warning</h2>
</div>
<div class="modal-panel info">
  <h2>Info</h2>
</div>