diff --git a/src/components/Button/README.md b/src/components/Button/README.md index 800d93b7..c7c77238 100644 --- a/src/components/Button/README.md +++ b/src/components/Button/README.md @@ -23,10 +23,13 @@ See [API](#api) for all available options. - Use **short yet comprehensible labels** to make buttons fit small screens. - Since buttons are there to take actions, **use a verb** to make it obvious - what your buttons do. + what your buttons do. - **Don't overwhelm your UI** with too many high-emphasis actions. There should - always be one but chances are that having more of them is not necessary. + always be one but chances are that having more of them is not necessary. + +- Ensure the **button action is well recognazible** across your target audience. + This is especially important when using the button [with an icon only](#icon-buttons). ## Priorities @@ -144,8 +147,11 @@ before or after the button's label. ### Icon Buttons -For clear and simple actions, buttons can visually consist just of an icon. -Label remains mandatory to keep the button accessible. +With a common and well-known icon, buttons can visually consist just of an icon. +Label remains mandatory to keep the button accessible when using assistive +technologies. + +👉 Use `labelVisibility="xs"` to make label always visible. ```docoff-react-preview