From 6a0725cf00569e7273bfbb11abd5142858285ef2 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Tue, 28 Jan 2025 15:46:30 -0500
Subject: [PATCH] Fix button appearance docs (#603)

---
 docs/docs/components/button.md | 20 +++++++++++++++-----
 docs/docs/native/button.md     | 30 ++++++++++++++++++++----------
 2 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md
index 04f48c63c..2d1d98206 100644
--- a/docs/docs/components/button.md
+++ b/docs/docs/components/button.md
@@ -30,33 +30,43 @@ Use the `appearance` attribute to change the button's visual appearance.
 
 ```html {.example}
 <div class="wa-stack">
-  <div class="wa-gap-m">
+  <div class="wa-gap-2xs">
+    <wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
     <wa-button appearance="accent" variant="neutral">Accent</wa-button>
     <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
+    <wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
     <wa-button appearance="filled" variant="neutral">Filled</wa-button>
     <wa-button appearance="plain" variant="neutral">Plain</wa-button>
   </div>
-  <div class="wa-gap-m">
+  <div class="wa-gap-2xs">
+    <wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
     <wa-button appearance="accent" variant="brand">Accent</wa-button>
     <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
+    <wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
     <wa-button appearance="filled" variant="brand">Filled</wa-button>
     <wa-button appearance="plain" variant="brand">Plain</wa-button>
   </div>
-  <div class="wa-gap-m">
+  <div class="wa-gap-2xs">
+    <wa-button appearance="accent outlined" variant="success">A + O</wa-button>
     <wa-button appearance="accent" variant="success">Accent</wa-button>
     <wa-button appearance="outlined" variant="success">Outlined</wa-button>
+    <wa-button appearance="filled outlined" variant="success">F + O</wa-button>
     <wa-button appearance="filled" variant="success">Filled</wa-button>
     <wa-button appearance="plain" variant="success">Plain</wa-button>
   </div>
-  <div class="wa-gap-m">
+  <div class="wa-gap-2xs">
+    <wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
     <wa-button appearance="accent" variant="warning">Accent</wa-button>
     <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
+    <wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
     <wa-button appearance="filled" variant="warning">Filled</wa-button>
     <wa-button appearance="plain" variant="warning">Plain</wa-button>
   </div>
-  <div class="wa-gap-m">
+  <div class="wa-gap-2xs">
+    <wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
     <wa-button appearance="accent" variant="danger">Accent</wa-button>
     <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
+    <wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
     <wa-button appearance="filled" variant="danger">Filled</wa-button>
     <wa-button appearance="plain" variant="danger">Plain</wa-button>
   </div>
diff --git a/docs/docs/native/button.md b/docs/docs/native/button.md
index 89ff93715..5ffc2c1c4 100644
--- a/docs/docs/native/button.md
+++ b/docs/docs/native/button.md
@@ -36,34 +36,44 @@ Use the [appearance utility classes](../utilities/appearance.md) to change the b
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
+  <button class="wa-accent wa-outlined wa-neutral">A + O</button>
   <button class="wa-accent wa-neutral">Accent</button>
-  <button class="wa-filled wa-neutral">Filled</button>
   <button class="wa-outlined wa-neutral">Outlined</button>
-  <button class="wa-plain wa-neutral">Text</button>
+  <button class="wa-filled wa-outlined wa-neutral">F + O</button>
+  <button class="wa-filled wa-neutral">Filled</button>
+  <button class="wa-plain wa-neutral">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
+  <button class="wa-accent wa-outlined wa-brand">A + O</button>
   <button class="wa-accent wa-brand">Accent</button>
-  <button class="wa-filled wa-brand">Filled</button>
   <button class="wa-outlined wa-brand">Outlined</button>
-  <button class="wa-plain wa-brand">Text</button>
+  <button class="wa-filled wa-outlined wa-brand">F + O</button>
+  <button class="wa-filled wa-brand">Filled</button>
+  <button class="wa-plain wa-brand">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
+  <button class="wa-accent wa-outlined wa-success">A + O</button>
   <button class="wa-accent wa-success">Accent</button>
-  <button class="wa-filled wa-success">Filled</button>
   <button class="wa-outlined wa-success">Outlined</button>
-  <button class="wa-plain wa-success">Text</button>
+  <button class="wa-filled wa-outlined wa-success">F + O</button>
+  <button class="wa-filled wa-success">Filled</button>
+  <button class="wa-plain wa-success">Plain</button>
 </div>
 <div style="margin-block-end: 1rem;">
+  <button class="wa-accent wa-outlined wa-warning">A + O</button>
   <button class="wa-accent wa-warning">Accent</button>
-  <button class="wa-filled wa-warning">Filled</button>
   <button class="wa-outlined wa-warning">Outlined</button>
-  <button class="wa-plain wa-warning">Text</button>
+  <button class="wa-filled wa-outlined wa-warning">F + O</button>
+  <button class="wa-filled wa-warning">Filled</button>
+  <button class="wa-plain wa-warning">Plain</button>
 </div>
 <div>
+  <button class="wa-accent wa-outlined wa-danger">A + O</button>
   <button class="wa-accent wa-danger">Accent</button>
-  <button class="wa-filled wa-danger">Filled</button>
   <button class="wa-outlined wa-danger">Outlined</button>
-  <button class="wa-plain wa-danger">Text</button>
+  <button class="wa-filled wa-outlined wa-danger">F + O</button>
+  <button class="wa-filled wa-danger">Filled</button>
+  <button class="wa-plain wa-danger">Plain</button>
 </div>
 ```