Ghost Modifier

The .ghost class creates transparent background buttons with colored text and borders. This "outline" or "ghost" style is useful for secondary actions where you want minimal visual weight.

.ghost can be combined with Intent Variants like .secondary, .success, etc. for different color variations.

Buttons

Apply .ghost to <button> elements:

See code

<section class="auto-grid">
  <button class="primary ghost">
    Button
  </button>
  <button class="secondary ghost">
    Button
  </button>
  <button class="contrast ghost">
    Button
  </button>
  <button class="success ghost">
    Button
  </button>
  <button class="info ghost">
    Button
  </button>
  <button class="warning ghost">
    Button
  </button>
  <button class="danger ghost">
    Button
  </button>
</section>

Input Buttons

Like <input type="submit"> and <input type="reset">:

See code

<section>
  <input class="ghost" type="button" value="Input Button" />
  <input class="ghost" type="submit" value="Input Submit" />
  <input class="ghost" type="reset" value="Input Reset" />
</section>

Role Buttons

Any HTML element with [role="button"]:

See code

<section>
  <section class="primary ghost" role="button">
    &lt;section&gt; as button
  </section>
    <section class="secondary ghost" role="button">
    &lt;section&gt; as button
  </section>
    <section class="contrast ghost" role="button">
    &lt;section&gt; as button
  </section>
    <section class="success ghost" role="button">
    &lt;section&gt; as button
  </section>
  <section class="info ghost" role="button">
    &lt;section&gt; as button
  </section>
  <section class="warning ghost" role="button">
    &lt;section&gt; as button
  </section>
  <section class="danger ghost" role="button">
    &lt;section&gt; as button
  </section>
  
  <hr>
  
  <div class="mb-d">
    <details>
      <summary class="primary ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="secondary ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="contrast ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="success ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="info ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="warning ghost" 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>
    <div class="mb-d">
    <details>
      <summary class="danger ghost" 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>
</section>

Cards

.ghost can also be applied to other elements or components, such as cards, to create a transparent background with colored borders and text.

See code

<section>
  <div class="card primary ghost">
    <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 secondary ghost">
    <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 contrast ghost">
    <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 success ghost">
    <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 info ghost">
    <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 warning ghost">
    <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 danger ghost">
    <hgroup>
      <h2>Card title</h2>
      <p>This is the subtitle</p>
    </hgroup>
    <p>This is the main content of the card.</p>
  </div>
</section>