js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix button appearance docs (#603)

Browse Source
This commit is contained in:
Lea Verou
2025-01-28 15:46:30 -05:00
committed by GitHub
parent 3ff8745910
commit 6a0725cf00
2 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/docs/components/button.md
View File

@@ -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>

30
docs/docs/native/button.md
View File

@@ -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>
```