webawesome/packages/webawesome/docs/_includes/visual-tests/appearance.njk

<h3>Badge</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>appearance=""</code></th>
    <th><code>.wa-[appearance]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>accent</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="accent">Brand</wa-badge>
          <wa-badge variant="neutral" appearance="accent">Neutral</wa-badge>
          <wa-badge variant="success" appearance="accent">Success</wa-badge>
          <wa-badge variant="warning" appearance="accent">Warning</wa-badge>
          <wa-badge variant="danger" appearance="accent">Danger</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" class="wa-accent">Brand</wa-badge>
          <wa-badge variant="neutral" class="wa-accent">Neutral</wa-badge>
          <wa-badge variant="success" class="wa-accent">Success</wa-badge>
          <wa-badge variant="warning" class="wa-accent">Warning</wa-badge>
          <wa-badge variant="danger" class="wa-accent">Danger</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="filled-outlined">Brand</wa-badge>
          <wa-badge variant="neutral" appearance="filled-outlined">Neutral</wa-badge>
          <wa-badge variant="success" appearance="filled-outlined">Success</wa-badge>
          <wa-badge variant="warning" appearance="filled-outlined">Warning</wa-badge>
          <wa-badge variant="danger" appearance="filled-outlined">Danger</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" class="wa-filled wa-outlined">Brand</wa-badge>
          <wa-badge variant="neutral" class="wa-filled wa-outlined">Neutral</wa-badge>
          <wa-badge variant="success" class="wa-filled wa-outlined">Success</wa-badge>
          <wa-badge variant="warning" class="wa-filled wa-outlined">Warning</wa-badge>
          <wa-badge variant="danger" class="wa-filled wa-outlined">Danger</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="filled">Brand</wa-badge>
          <wa-badge variant="neutral" appearance="filled">Neutral</wa-badge>
          <wa-badge variant="success" appearance="filled">Success</wa-badge>
          <wa-badge variant="warning" appearance="filled">Warning</wa-badge>
          <wa-badge variant="danger" appearance="filled">Danger</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" class="wa-filled">Brand</wa-badge>
          <wa-badge variant="neutral" class="wa-filled">Neutral</wa-badge>
          <wa-badge variant="success" class="wa-filled">Success</wa-badge>
          <wa-badge variant="warning" class="wa-filled">Warning</wa-badge>
          <wa-badge variant="danger" class="wa-filled">Danger</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
          <wa-badge variant="neutral" appearance="outlined">Neutral</wa-badge>
          <wa-badge variant="success" appearance="outlined">Success</wa-badge>
          <wa-badge variant="warning" appearance="outlined">Warning</wa-badge>
          <wa-badge variant="danger" appearance="outlined">Danger</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" class="wa-outlined">Brand</wa-badge>
          <wa-badge variant="neutral" class="wa-outlined">Neutral</wa-badge>
          <wa-badge variant="success" class="wa-outlined">Success</wa-badge>
          <wa-badge variant="warning" class="wa-outlined">Warning</wa-badge>
          <wa-badge variant="danger" class="wa-outlined">Danger</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>plain</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="plain">Brand</wa-badge>
          <wa-badge variant="neutral" appearance="plain">Neutral</wa-badge>
          <wa-badge variant="success" appearance="plain">Success</wa-badge>
          <wa-badge variant="warning" appearance="plain">Warning</wa-badge>
          <wa-badge variant="danger" appearance="plain">Danger</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" class="wa-plain">Brand</wa-badge>
          <wa-badge variant="neutral" class="wa-plain">Neutral</wa-badge>
          <wa-badge variant="success" class="wa-plain">Success</wa-badge>
          <wa-badge variant="warning" class="wa-plain">Warning</wa-badge>
          <wa-badge variant="danger" class="wa-plain">Danger</wa-badge>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Button</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>appearance=""</code></th>
    <th><code>.wa-[appearance]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>accent</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
          <wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
          <wa-button variant="success" appearance="accent outlined">Success</wa-button>
          <wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
          <wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-accent wa-outlined">Brand</wa-button>
          <wa-button variant="neutral" class="wa-accent wa-outlined">Neutral</wa-button>
          <wa-button variant="success" class="wa-accent wa-outlined">Success</wa-button>
          <wa-button variant="warning" class="wa-accent wa-outlined">Warning</wa-button>
          <wa-button variant="danger" class="wa-accent wa-outlined">Danger</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>accent</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="accent">Brand</wa-button>
          <wa-button variant="neutral" appearance="accent">Neutral</wa-button>
          <wa-button variant="success" appearance="accent">Success</wa-button>
          <wa-button variant="warning" appearance="accent">Warning</wa-button>
          <wa-button variant="danger" appearance="accent">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-accent">Brand</wa-button>
          <wa-button variant="neutral" class="wa-accent">Neutral</wa-button>
          <wa-button variant="success" class="wa-accent">Success</wa-button>
          <wa-button variant="warning" class="wa-accent">Warning</wa-button>
          <wa-button variant="danger" class="wa-accent">Danger</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
          <wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
          <wa-button variant="success" appearance="filled-outlined">Success</wa-button>
          <wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
          <wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-filled wa-outlined">Brand</wa-button>
          <wa-button variant="neutral" class="wa-filled wa-outlined">Neutral</wa-button>
          <wa-button variant="success" class="wa-filled wa-outlined">Success</wa-button>
          <wa-button variant="warning" class="wa-filled wa-outlined">Warning</wa-button>
          <wa-button variant="danger" class="wa-filled wa-outlined">Danger</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="filled">Brand</wa-button>
          <wa-button variant="neutral" appearance="filled">Neutral</wa-button>
          <wa-button variant="success" appearance="filled">Success</wa-button>
          <wa-button variant="warning" appearance="filled">Warning</wa-button>
          <wa-button variant="danger" appearance="filled">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-filled">Brand</wa-button>
          <wa-button variant="neutral" class="wa-filled">Neutral</wa-button>
          <wa-button variant="success" class="wa-filled">Success</wa-button>
          <wa-button variant="warning" class="wa-filled">Warning</wa-button>
          <wa-button variant="danger" class="wa-filled">Danger</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="outlined">Brand</wa-button>
          <wa-button variant="neutral" appearance="outlined">Neutral</wa-button>
          <wa-button variant="success" appearance="outlined">Success</wa-button>
          <wa-button variant="warning" appearance="outlined">Warning</wa-button>
          <wa-button variant="danger" appearance="outlined">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-outlined">Brand</wa-button>
          <wa-button variant="neutral" class="wa-outlined">Neutral</wa-button>
          <wa-button variant="success" class="wa-outlined">Success</wa-button>
          <wa-button variant="warning" class="wa-outlined">Warning</wa-button>
          <wa-button variant="danger" class="wa-outlined">Danger</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>plain</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="plain">Brand</wa-button>
          <wa-button variant="neutral" appearance="plain">Neutral</wa-button>
          <wa-button variant="success" appearance="plain">Success</wa-button>
          <wa-button variant="warning" appearance="plain">Warning</wa-button>
          <wa-button variant="danger" appearance="plain">Danger</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" class="wa-plain">Brand</wa-button>
          <wa-button variant="neutral" class="wa-plain">Neutral</wa-button>
          <wa-button variant="success" class="wa-plain">Success</wa-button>
          <wa-button variant="warning" class="wa-plain">Warning</wa-button>
          <wa-button variant="danger" class="wa-plain">Danger</wa-button>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Callout</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>appearance=""</code></th>
    <th><code>.wa-[appearance]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>accent</code> + <code>outlined</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="accent outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="accent outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="accent outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="accent outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="accent outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-accent wa-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-accent wa-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-accent wa-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-accent wa-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-accent wa-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>accent</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="accent">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="accent">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="accent">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="accent">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="accent">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-accent">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-accent">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-accent">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-accent">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-accent">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code> + <code>outlined</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-filled wa-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-filled wa-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-filled wa-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-filled wa-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-filled wa-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="filled">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="filled">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="filled">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="filled">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="filled">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-filled">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-filled">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-filled">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-filled">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-filled">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>plain</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" appearance="plain">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" appearance="plain">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" appearance="plain">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" appearance="plain">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" appearance="plain">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="brand" class="wa-plain">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Brand
          </wa-callout>
          <wa-callout variant="neutral" class="wa-plain">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Neutral
          </wa-callout>
          <wa-callout variant="success" class="wa-plain">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Success
          </wa-callout>
          <wa-callout variant="warning" class="wa-plain">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Warning
          </wa-callout>
          <wa-callout variant="danger" class="wa-plain">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Danger
          </wa-callout>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Tag</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>appearance=""</code></th>
    <th><code>.wa-[appearance]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>accent</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="accent outlined">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="accent outlined">Neutral</wa-tag>
          <wa-tag variant="success" appearance="accent outlined">Success</wa-tag>
          <wa-tag variant="warning" appearance="accent outlined">Warning</wa-tag>
          <wa-tag variant="danger" appearance="accent outlined">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-accent wa-outlined">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-accent wa-outlined">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-accent wa-outlined">Success</wa-tag>
          <wa-tag variant="warning" class="wa-accent wa-outlined">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-accent wa-outlined">Danger</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>accent</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="accent">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="accent">Neutral</wa-tag>
          <wa-tag variant="success" appearance="accent">Success</wa-tag>
          <wa-tag variant="warning" appearance="accent">Warning</wa-tag>
          <wa-tag variant="danger" appearance="accent">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-accent">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-accent">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-accent">Success</wa-tag>
          <wa-tag variant="warning" class="wa-accent">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-accent">Danger</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code> + <code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="filled-outlined">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="filled-outlined">Neutral</wa-tag>
          <wa-tag variant="success" appearance="filled-outlined">Success</wa-tag>
          <wa-tag variant="warning" appearance="filled-outlined">Warning</wa-tag>
          <wa-tag variant="danger" appearance="filled-outlined">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-filled wa-outlined">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-filled wa-outlined">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-filled wa-outlined">Success</wa-tag>
          <wa-tag variant="warning" class="wa-filled wa-outlined">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-filled wa-outlined">Danger</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="filled">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="filled">Neutral</wa-tag>
          <wa-tag variant="success" appearance="filled">Success</wa-tag>
          <wa-tag variant="warning" appearance="filled">Warning</wa-tag>
          <wa-tag variant="danger" appearance="filled">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-filled">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-filled">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-filled">Success</wa-tag>
          <wa-tag variant="warning" class="wa-filled">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-filled">Danger</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="outlined">Neutral</wa-tag>
          <wa-tag variant="success" appearance="outlined">Success</wa-tag>
          <wa-tag variant="warning" appearance="outlined">Warning</wa-tag>
          <wa-tag variant="danger" appearance="outlined">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-outlined">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-outlined">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-outlined">Success</wa-tag>
          <wa-tag variant="warning" class="wa-outlined">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-outlined">Danger</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>plain</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="plain">Brand</wa-tag>
          <wa-tag variant="neutral" appearance="plain">Neutral</wa-tag>
          <wa-tag variant="success" appearance="plain">Success</wa-tag>
          <wa-tag variant="warning" appearance="plain">Warning</wa-tag>
          <wa-tag variant="danger" appearance="plain">Danger</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" class="wa-plain">Brand</wa-tag>
          <wa-tag variant="neutral" class="wa-plain">Neutral</wa-tag>
          <wa-tag variant="success" class="wa-plain">Success</wa-tag>
          <wa-tag variant="warning" class="wa-plain">Warning</wa-tag>
          <wa-tag variant="danger" class="wa-plain">Danger</wa-tag>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
<wa-divider></wa-divider>

<h3>Form Controls</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>appearance=""</code></th>
    <th><code>.wa-[appearance]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>outlined</code></th>
      <td>
        <div class="wa-stack">
          <wa-input appearance="outlined" placeholder="Input"></wa-input>
          <wa-select appearance="outlined" placeholder="Select">
            <wa-option value="1">Option</wa-option>
          </wa-select>
          <wa-textarea appearance="outlined" placeholder="Textarea"></wa-textarea>
        </div>
      </td>
      <td>
        <div class="wa-stack">
          <wa-input class="wa-outlined" placeholder="Input"></wa-input>
          <wa-select class="wa-outlined" placeholder="Select">
            <wa-option value="1">Option</wa-option>
          </wa-select>
          <wa-textarea class="wa-outlined" placeholder="Textarea"></wa-textarea>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>filled</code></th>
      <td>
        <div class="wa-stack">
          <wa-input appearance="filled" placeholder="Input"></wa-input>
          <wa-select appearance="filled" placeholder="Select">
            <wa-option value="1">Option</wa-option>
          </wa-select>
          <wa-textarea appearance="filled" placeholder="Textarea"></wa-textarea>
        </div>
      </td>
      <td>
        <div class="wa-stack">
          <wa-input class="wa-filled" placeholder="Input"></wa-input>
          <wa-select class="wa-filled" placeholder="Select">
            <wa-option value="1">Option</wa-option>
          </wa-select>
          <wa-textarea class="wa-filled" placeholder="Textarea"></wa-textarea>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>