aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs/5.0/components/close-button.md
diff options
context:
space:
mode:
Diffstat (limited to 'site/content/docs/5.0/components/close-button.md')
-rw-r--r--site/content/docs/5.0/components/close-button.md18
1 files changed, 18 insertions, 0 deletions
diff --git a/site/content/docs/5.0/components/close-button.md b/site/content/docs/5.0/components/close-button.md
new file mode 100644
index 000000000..28211cd5d
--- /dev/null
+++ b/site/content/docs/5.0/components/close-button.md
@@ -0,0 +1,18 @@
+---
+layout: docs
+title: Close button
+description: A generic close button for dismissing content like modals and alerts.
+group: components
+---
+
+**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
+
+{{< example >}}
+<button type="button" class="close" aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+</button>
+
+<button type="button" class="close" disabled aria-label="Close">
+ <span aria-hidden="true">&times;</span>
+</button>
+{{< /example >}}