Components

Alert

Alerts are used when the user needs to be indicated of the ramifications of the action they are about to take (i.e. deleting data) or they need to take a specific action on the page to change its state.

Quick look

A few things to keep in mind when using alerts:

  1. Alerts use the same lightbox scrim as modals; the key difference is that an alert does not have fields on it and is not arbitrarily dismissible (i.e. no X in the corner).
  2. Alerts can either have terminal actions (i.e. Save/Cancel buttons) or be dismissed based on state change (i.e. a loader finishes).
  3. Alerts are typically chained after an action where the user needs extra precaution, such as deleting data or resetting something.

Try it out

Below are some simple examples of what the alerts look like, and how they function. These buttons and alerts perform no actual action on this site but in a real use case, there should be some action taking place once the buttons inside the alerts are clicked.

Are you sure you want to delete that?
Setting this as Done with set all the undone things to Done.
Are you sure you want to continue?

You are about to take a journey to: Adventure Land!

Click 'Ready' when you want to go!

Code samples

<div class="alert-demo pseudo-section flexr row">
  <div class="sub-sector">
    <button class="dqpl-button-secondary" type="button" data-dialog-id="demo-1">Delete</button>
  </div>
  <div class="sub-sector">
    <button class="dqpl-button-secondary" type="button" data-dialog-id="demo-2">Multi Action Alert</button>
  </div>
  <div class="sub-sector">
    <button class="dqpl-button-secondary" type="button" data-dialog-id="demo-3">Loading Alert</button>
  </div>
</div>
<div class="dqpl-alert" id="demo-1" role="alertdialog">
  <div class="dqpl-dialog-inner">
    <div class="dqpl-content" id="info">
      <div class="dqpl-text">Are you sure you want to delete that?</div>
      <div class="dqpl-buttons">
        <button class="dqpl-button-primary set" aria-describedby="info">Delete</button>
        <button class="dqpl-button-secondary dqpl-cancel">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="dqpl-alert" id="demo-2" role="alertdialog">
  <div class="dqpl-dialog-inner">
    <div class="dqpl-content" id="info">
      <div class="dqpl-text">Setting this as Done with set all the undone things to Done.</div>
      <div class="dqpl-confirm">Are you sure you want to continue?</div>
      <div class="dqpl-buttons">
        <button class="dqpl-button-primary set" aria-describedby="info">Set</button>
        <button class="dqpl-button-secondary dqpl-cancel">Cancel</button>
      </div>
    </div>
  </div>
</div>
<div class="dqpl-alert" id="demo-3" role="alertdialog">
  <div class="dqpl-dialog-inner">
    <div class="dqpl-content" id="info">
      <div class="dqpl-text">
        <p>You are about to take a journey to: Adventure Land!</p>
      </div>
      <div class="dqpl-confirm">Click 'Ready' when you want to go!</div>
      <div class="dqpl-buttons">
        <button class="dqpl-button-primary ready" aria-describedby="info">Ready</button>
      </div>
    </div>
    <div class="dqpl-loader"></div>
  </div>
</div>

For more information on implementation read thewiki.