Warning Intent

The .warning class provides a visual style for links and buttons that indicate a warning or cautionary action. Use it to highlight actions that could have potential risks or require careful attention.

Links

Apply .warning to <a> elements or elements with [role="link"] to indicate a warning action.

<a href="#" class="warning">Regular Link</a>

<hr>

<a href="#" aria-current="page" class="warning">Active link</a>
<hr>
<button class="warning" role="link">
  &lt;button&gt; as link
</button>

<hr>

<button role="link" aria-current="page" class="warning">Active button</button>

<hr>

<div class="warning" role="link">
  &lt;div&gt; as link
</div>

<hr>

<div role="link" aria-current="page" class="warning">Active div</div>

Buttons

Apply .warning to <button> elements or elements with [role="button"] for a warning action button.

<div class="auto-grid">
  <button class="warning">
    Button
  </button>
  
  <div class="warning" role="button">
    &lt;div&gt; as button
  </div>
  
  <details>
    <summary class="warning" role="button" aria-haspopup="menu">
      Dropdown as a button
    </summary>
    <ul role="menu">
      <li><a role="menuitem" href="#">Solid</a></li>
      <li><a role="menuitem" href="#">Liquid</a></li>
      <li><a role="menuitem" href="#">Gas</a></li>
      <li><a role="menuitem" href="#">Plasma</a></li>
    </ul>
  </details>
</div>

Cards

Apply .warning to an element with .card for a warning action card.

See code

<div class="card warning">
  <hgroup>
    <h2>Card title</h2>
    <p>This is the subtitle</p>
  </hgroup>
  <p>This is the main content of the card.</p>
</div>

<hr>

<div class="card warning">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

Modifiers

.warning can be modified with .subtle to create cards with a more muted appearance, often used for less prominent actions.

See code

<div class="auto-grid">
  <button class="subtle warning">
    Button
  </button>
  
    <div class="subtle warning" role="button">
    &lt;div&gt; as button
  </div>
  
  <details>
    <summary class="subtle warning" role="button" aria-haspopup="menu">
      Dropdown as a button
    </summary>
    <ul role="menu">
      <li><a role="menuitem" href="#">Solid</a></li>
      <li><a role="menuitem" href="#">Liquid</a></li>
      <li><a role="menuitem" href="#">Gas</a></li>
      <li><a role="menuitem" href="#">Plasma</a></li>
    </ul>
  </details>
</div>

<br>

<div class="card subtle warning">
  <hgroup>
    <h2>Card title</h2>
    <p>This is the subtitle</p>
  </hgroup>
  <p>This is the main content of the card.</p>
</div>

<div class="card subtle warning">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</div>

.warning can be modified with .ghost to create ghost buttons and cards, which have a transparent background and a border, making them less visually prominent while still maintaining the warning effect.

See code

<div class="auto-grid">
  <button class="ghost warning">
    Button
  </button>
  
    <div class="ghost warning" role="button">
    &lt;div&gt; as button
  </div>
  
  <details>
    <summary class="ghost warning" role="button" aria-haspopup="menu">
      Dropdown as a button
    </summary>
    <ul role="menu">
      <li><a role="menuitem" href="#">Solid</a></li>
      <li><a role="menuitem" href="#">Liquid</a></li>
      <li><a role="menuitem" href="#">Gas</a></li>
      <li><a role="menuitem" href="#">Plasma</a></li>
    </ul>
  </details>
</div>

<br>

<div class="card ghost warning">
  <hgroup>
    <h2>Card title</h2>
    <p>This is the subtitle</p>
  </hgroup>
  <p>This is the main content of the card.</p>
</div>

<div class="card ghost warning">
  <header>
    <h2>Card title</h2>
  </header>
  <p>Cards support optional header and footer sections that are visually distinct from the main content.</p>
  <footer>
    <button class="secondary">Cancel</button>
    <button>Confirm</button>
  </footer>
</div>