<h3>Badge</h3>

<div class="table-scroll">
<table>
  <thead>
    <th></th>
    <th><code>variant=""</code></th>
    <th><code>.wa-[variant]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>brand</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="brand" appearance="accent">Accent</wa-badge>
          <wa-badge variant="brand" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge variant="brand" appearance="filled">Filled</wa-badge>
          <wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
          <wa-badge class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
          <wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>neutral</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
          <wa-badge variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
          <wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
          <wa-badge class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
          <wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>success</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="success" appearance="accent">Accent</wa-badge>
          <wa-badge variant="success" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge variant="success" appearance="filled">Filled</wa-badge>
          <wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
          <wa-badge class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
          <wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>warning</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="warning" appearance="accent">Accent</wa-badge>
          <wa-badge variant="warning" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge variant="warning" appearance="filled">Filled</wa-badge>
          <wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
          <wa-badge class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
          <wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>danger</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge variant="danger" appearance="accent">Accent</wa-badge>
          <wa-badge variant="danger" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge variant="danger" appearance="filled">Filled</wa-badge>
          <wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
          <wa-badge class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-badge>
          <wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
          <wa-badge class="wa-danger" appearance="outlined">Outlined</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>variant=""</code></th>
    <th><code>.wa-[variant]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>brand</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="brand" appearance="accent">Accent</wa-button>
          <wa-button variant="brand" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button variant="brand" appearance="filled">Filled</wa-button>
          <wa-button variant="brand" appearance="outlined">Outlined</wa-button>
          <wa-button variant="brand" appearance="plain">Plain</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button class="wa-brand" appearance="accent">Accent</wa-button>
          <wa-button class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button class="wa-brand" appearance="filled">Filled</wa-button>
          <wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
          <wa-button class="wa-brand" appearance="plain">Plain</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>neutral</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="neutral" appearance="accent">Accent</wa-button>
          <wa-button variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button variant="neutral" appearance="filled">Filled</wa-button>
          <wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
          <wa-button variant="neutral" appearance="plain">Plain</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
          <wa-button class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
          <wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
          <wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>success</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="success" appearance="accent">Accent</wa-button>
          <wa-button variant="success" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button variant="success" appearance="filled">Filled</wa-button>
          <wa-button variant="success" appearance="outlined">Outlined</wa-button>
          <wa-button variant="success" appearance="plain">Plain</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button class="wa-success" appearance="accent">Accent</wa-button>
          <wa-button class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button class="wa-success" appearance="filled">Filled</wa-button>
          <wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
          <wa-button class="wa-success" appearance="plain">Plain</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>warning</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="warning" appearance="accent">Accent</wa-button>
          <wa-button variant="warning" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button variant="warning" appearance="filled">Filled</wa-button>
          <wa-button variant="warning" appearance="outlined">Outlined</wa-button>
          <wa-button variant="warning" appearance="plain">Plain</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button class="wa-warning" appearance="accent">Accent</wa-button>
          <wa-button class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button class="wa-warning" appearance="filled">Filled</wa-button>
          <wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
          <wa-button class="wa-warning" appearance="plain">Plain</wa-button>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>danger</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button variant="danger" appearance="accent">Accent</wa-button>
          <wa-button variant="danger" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button variant="danger" appearance="filled">Filled</wa-button>
          <wa-button variant="danger" appearance="outlined">Outlined</wa-button>
          <wa-button variant="danger" appearance="plain">Plain</wa-button>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-button class="wa-danger" appearance="accent">Accent</wa-button>
          <wa-button class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-button>
          <wa-button class="wa-danger" appearance="filled">Filled</wa-button>
          <wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
          <wa-button class="wa-danger" appearance="plain">Plain</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>variant=""</code></th>
    <th><code>.wa-[variant]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>brand</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>
            Accent
          </wa-callout>
          <wa-callout variant="brand" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout variant="brand" appearance="filled">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout variant="brand" appearance="outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout variant="brand" appearance="plain">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout class="wa-brand" appearance="accent">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout class="wa-brand" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout class="wa-brand" appearance="filled">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout class="wa-brand" appearance="outlined">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout class="wa-brand" appearance="plain">
            <wa-icon slot="icon" name="circle-star"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>neutral</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="neutral" appearance="accent">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout variant="neutral" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout variant="neutral" appearance="filled">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout variant="neutral" appearance="outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout variant="neutral" appearance="plain">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout class="wa-neutral" appearance="accent">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout class="wa-neutral" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout class="wa-neutral" appearance="filled">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout class="wa-neutral" appearance="outlined">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout class="wa-neutral" appearance="plain">
            <wa-icon slot="icon" name="circle-info"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>success</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="success" appearance="accent">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout variant="success" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout variant="success" appearance="filled">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout variant="success" appearance="outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout variant="success" appearance="plain">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout class="wa-success" appearance="accent">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout class="wa-success" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout class="wa-success" appearance="filled">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout class="wa-success" appearance="outlined">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout class="wa-success" appearance="plain">
            <wa-icon slot="icon" name="circle-check"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>warning</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="warning" appearance="accent">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout variant="warning" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout variant="warning" appearance="filled">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout variant="warning" appearance="outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout variant="warning" appearance="plain">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout class="wa-warning" appearance="accent">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout class="wa-warning" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout class="wa-warning" appearance="filled">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout class="wa-warning" appearance="outlined">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout class="wa-warning" appearance="plain">
            <wa-icon slot="icon" name="circle-exclamation"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>danger</code></th>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout variant="danger" appearance="accent">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout variant="danger" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout variant="danger" appearance="filled">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout variant="danger" appearance="outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout variant="danger" appearance="plain">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Plain
          </wa-callout>
        </div>
      </td>
      <td>
        <div class="wa-grid wa-gap-2xs">
          <wa-callout class="wa-danger" appearance="accent">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Accent
          </wa-callout>
          <wa-callout class="wa-danger" appearance="filled-outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Filled-Outlined
          </wa-callout>
          <wa-callout class="wa-danger" appearance="filled">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Filled
          </wa-callout>
          <wa-callout class="wa-danger" appearance="outlined">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Outlined
          </wa-callout>
          <wa-callout class="wa-danger" appearance="plain">
            <wa-icon slot="icon" name="circle-xmark"></wa-icon>
            Plain
          </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>variant=""</code></th>
    <th><code>.wa-[variant]</code></th>
  </thead>
  <tbody>
    <tr>
      <th><code>brand</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
          <wa-tag variant="brand" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag variant="brand" appearance="filled">Filled</wa-tag>
          <wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
          <wa-tag class="wa-brand" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
          <wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>neutral</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
          <wa-tag variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
          <wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
          <wa-tag class="wa-neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
          <wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>success</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="success" appearance="accent">Accent</wa-tag>
          <wa-tag variant="success" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag variant="success" appearance="filled">Filled</wa-tag>
          <wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
          <wa-tag class="wa-success" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
          <wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>warning</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
          <wa-tag variant="warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag variant="warning" appearance="filled">Filled</wa-tag>
          <wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
          <wa-tag class="wa-warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
          <wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>danger</code></th>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
          <wa-tag variant="danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag variant="danger" appearance="filled">Filled</wa-tag>
          <wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
      <td>
        <div class="wa-cluster wa-gap-2xs">
          <wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
          <wa-tag class="wa-danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
          <wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
          <wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
