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