Update notice

Two choices for an available stylesheet update: now, or on the next start.

<section class="card">
  <h3>Stylesheet 1.0.1 is ready</h3>
  <button type="button" class="btn sm">Install now</button>
  <button type="button" class="btn sm ghost">On next start</button>
</section>

The single-file button copies a document with the stylesheet and script inlined.

When to use

An update can apply immediately or after a reload.
Both choices need to be visible together.

When not to use

The update is mandatory and has no second choice.
There is no update.

Usage

<section class="card">
  <h3>Stylesheet 1.0.1 is ready</h3>
  <button type="button" class="btn sm">Install now</button>
  <button type="button" class="btn sm ghost">On next start</button>
</section>

Variants

The preview shows the form used in the gallery.

Props

Name	Type	Default	Description
data-install-now	button	—	Applies inside this preview.
data-install-later	button	—	Stores a flag and applies on the next load of this preview.

Keyboard

Key	Action
Enter	Activates the focused choice.
Tab	Moves between the two buttons.

Accessibility

Both actions are buttons with distinct names.
The result is written into the notice.

Motion

No motion.

Pattern origin

Pattern type: an update notice with two install choices.

Toast Dialog