diff options
| author | Mark Otto <[email protected]> | 2016-02-06 18:34:52 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-06 18:34:52 -0800 |
| commit | b8ff763d6232d4a61858739b43f509366ffd1500 (patch) | |
| tree | 2951b5a4dff584ac09918c3bcbeed6d75be73208 | |
| parent | 9c0e20e41dc4fc4d3563e9abbbac57d40a3d74e4 (diff) | |
| download | bootstrap-b8ff763d6232d4a61858739b43f509366ffd1500.tar.xz bootstrap-b8ff763d6232d4a61858739b43f509366ffd1500.zip | |
Tweak disabled button docs to help out #17231
| -rw-r--r-- | docs/components/buttons.md | 6 |
1 files changed, 5 insertions, 1 deletions
diff --git a/docs/components/buttons.md b/docs/components/buttons.md index e3a4b26a8..9ec1c23f1 100644 --- a/docs/components/buttons.md +++ b/docs/components/buttons.md @@ -116,7 +116,11 @@ Make buttons look inactive by adding the `disabled` boolean attribute to any `<b <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button> {% endexample %} -As `<a>` elements don't support the `disabled` attribute, you must add the `.disabled` class to fake it. In addition, include the `aria-disabled="true"` attribute, to indicate the state of the element to assistive technologies. +Disabled buttons using the `<a>` element behave a bit different: + +- `<a>`s don't support the `disabled` attribute, so you must add the `.disabled` class to make it visually appear disabled. +- Some future-friendly styles are included to disable all `pointer-events` on anchor buttons. For browsers that support that proper, you won't see the disabled cursor at all. +- Disabled buttons should include the `aria-disabled="true"` attribute to indicate the state of the element to assistive technologies. {% example html %} <a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> |
