2016-09-09 12:48:17 +08:00
---
layout: docs
2019-10-22 10:27:43 +08:00
title: Close button
description: A generic close button for dismissing content like modals and alerts.
2019-05-11 02:27:22 +08:00
group: components
2016-09-09 12:48:17 +08:00
---
2019-12-28 00:40:06 +08:00
**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.
2016-09-09 12:48:17 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2016-09-09 12:48:17 +08:00
< button type = "button" class = "close" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2019-12-28 00:40:06 +08:00
< button type = "button" class = "close" disabled aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2019-01-09 00:33:28 +08:00
{{< / example > }}
