diff --git a/documentation/GUIDE__AE_UI_Style_Guidelines.md b/documentation/GUIDE__AE_UI_Style_Guidelines.md index 6329b583..1d4b9980 100644 --- a/documentation/GUIDE__AE_UI_Style_Guidelines.md +++ b/documentation/GUIDE__AE_UI_Style_Guidelines.md @@ -183,7 +183,37 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho --- -## 8. Accessibility (Section 508 / WCAG 2.1 AA) +## 8. Button UX Standard + +**Default rule: every button includes a Lucide icon AND a text label.** + +The icon gives instant visual recognition; the label removes ambiguity. This matters especially for non-English-native users and anyone scanning a UI quickly under conference-room pressure. + +| Context | Acceptable pattern | +|---|---| +| Standard action buttons | Icon (left, `size={14-16}`) + text label — **preferred** | +| Space-constrained toolbars / icon rows | Icon-only — requires `title="..."` and `aria-label="..."` | +| Extremely tight inline cells | Text-only — acceptable only when no icon fits | +| Destructive / irreversible actions | Always icon + text, never icon-only | + +```svelte + + + + + + + + +``` + +--- + +## 9. Accessibility (Section 508 / WCAG 2.1 AA) | Requirement | Implementation | |---|---| @@ -195,7 +225,6 @@ Always wrap in `{#if $lq__obj}{...}{:else}...skeleton...{/if}` — **never** sho | Form inputs | Visible `