Skip to content

Commit 6a0725c

Browse files
LeaVerouLeaVerou
authored
Fix button appearance docs (#603)
1 parent 3ff8745 commit 6a0725c

File tree

2 files changed

+35
-15
lines changed

2 files changed

+35
-15
lines changed

‎docs/docs/components/button.md

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,33 +30,43 @@ Use the `appearance` attribute to change the button's visual appearance.
3030

3131
```html {.example}
3232
<div class="wa-stack">
33-
<div class="wa-gap-m">
33+
<div class="wa-gap-2xs">
34+
<wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
3435
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
3536
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
37+
<wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
3638
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
3739
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
3840
</div>
39-
<div class="wa-gap-m">
41+
<div class="wa-gap-2xs">
42+
<wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
4043
<wa-button appearance="accent" variant="brand">Accent</wa-button>
4144
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
45+
<wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
4246
<wa-button appearance="filled" variant="brand">Filled</wa-button>
4347
<wa-button appearance="plain" variant="brand">Plain</wa-button>
4448
</div>
45-
<div class="wa-gap-m">
49+
<div class="wa-gap-2xs">
50+
<wa-button appearance="accent outlined" variant="success">A + O</wa-button>
4651
<wa-button appearance="accent" variant="success">Accent</wa-button>
4752
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
53+
<wa-button appearance="filled outlined" variant="success">F + O</wa-button>
4854
<wa-button appearance="filled" variant="success">Filled</wa-button>
4955
<wa-button appearance="plain" variant="success">Plain</wa-button>
5056
</div>
51-
<div class="wa-gap-m">
57+
<div class="wa-gap-2xs">
58+
<wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
5259
<wa-button appearance="accent" variant="warning">Accent</wa-button>
5360
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
61+
<wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
5462
<wa-button appearance="filled" variant="warning">Filled</wa-button>
5563
<wa-button appearance="plain" variant="warning">Plain</wa-button>
5664
</div>
57-
<div class="wa-gap-m">
65+
<div class="wa-gap-2xs">
66+
<wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
5867
<wa-button appearance="accent" variant="danger">Accent</wa-button>
5968
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
69+
<wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
6070
<wa-button appearance="filled" variant="danger">Filled</wa-button>
6171
<wa-button appearance="plain" variant="danger">Plain</wa-button>
6272
</div>

‎docs/docs/native/button.md

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,34 +36,44 @@ Use the [appearance utility classes](../utilities/appearance.md) to change the b
3636

3737
```html {.example}
3838
<div style="margin-block-end: 1rem;">
39+
<button class="wa-accent wa-outlined wa-neutral">A + O</button>
3940
<button class="wa-accent wa-neutral">Accent</button>
40-
<button class="wa-filled wa-neutral">Filled</button>
4141
<button class="wa-outlined wa-neutral">Outlined</button>
42-
<button class="wa-plain wa-neutral">Text</button>
42+
<button class="wa-filled wa-outlined wa-neutral">F + O</button>
43+
<button class="wa-filled wa-neutral">Filled</button>
44+
<button class="wa-plain wa-neutral">Plain</button>
4345
</div>
4446
<div style="margin-block-end: 1rem;">
47+
<button class="wa-accent wa-outlined wa-brand">A + O</button>
4548
<button class="wa-accent wa-brand">Accent</button>
46-
<button class="wa-filled wa-brand">Filled</button>
4749
<button class="wa-outlined wa-brand">Outlined</button>
48-
<button class="wa-plain wa-brand">Text</button>
50+
<button class="wa-filled wa-outlined wa-brand">F + O</button>
51+
<button class="wa-filled wa-brand">Filled</button>
52+
<button class="wa-plain wa-brand">Plain</button>
4953
</div>
5054
<div style="margin-block-end: 1rem;">
55+
<button class="wa-accent wa-outlined wa-success">A + O</button>
5156
<button class="wa-accent wa-success">Accent</button>
52-
<button class="wa-filled wa-success">Filled</button>
5357
<button class="wa-outlined wa-success">Outlined</button>
54-
<button class="wa-plain wa-success">Text</button>
58+
<button class="wa-filled wa-outlined wa-success">F + O</button>
59+
<button class="wa-filled wa-success">Filled</button>
60+
<button class="wa-plain wa-success">Plain</button>
5561
</div>
5662
<div style="margin-block-end: 1rem;">
63+
<button class="wa-accent wa-outlined wa-warning">A + O</button>
5764
<button class="wa-accent wa-warning">Accent</button>
58-
<button class="wa-filled wa-warning">Filled</button>
5965
<button class="wa-outlined wa-warning">Outlined</button>
60-
<button class="wa-plain wa-warning">Text</button>
66+
<button class="wa-filled wa-outlined wa-warning">F + O</button>
67+
<button class="wa-filled wa-warning">Filled</button>
68+
<button class="wa-plain wa-warning">Plain</button>
6169
</div>
6270
<div>
71+
<button class="wa-accent wa-outlined wa-danger">A + O</button>
6372
<button class="wa-accent wa-danger">Accent</button>
64-
<button class="wa-filled wa-danger">Filled</button>
6573
<button class="wa-outlined wa-danger">Outlined</button>
66-
<button class="wa-plain wa-danger">Text</button>
74+
<button class="wa-filled wa-outlined wa-danger">F + O</button>
75+
<button class="wa-filled wa-danger">Filled</button>
76+
<button class="wa-plain wa-danger">Plain</button>
6777
</div>
6878
```
6979

0 commit comments

Comments
 (0)