关闭按钮

一个通用的关闭按钮，用于关闭情态动词和警报等内容。

本页导航↓

示例

提供使用 .btn-close 关闭或关闭组件的选项。默认样式是有限的，但高度可自定义。修改Sass变量以替换默认 background-image。一定要包括屏幕阅读器的文本，就像我们对 aria-label 标签所做的那样。

<button type="button" class="btn-close" aria-label="Close"></button>

禁用状态

禁用的关闭按钮更改其 opacity。我们还应用了 pointer-events: none 和 user-select: none 来防止触发悬停和活动状态。

<button type="button" class="btn-close" disabled aria-label="Close"></button>

深色按钮组

改变默认的 .btn-close 变成带有 .btn-close-white的类，这个类使用 filter 属性反转背景图片

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>