关闭按钮

一个通用的关闭按钮，用于关闭模式和警报之类的内容。

在本页面

示例

提供使用.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-white类将默认的.btn-close 更改为白色。此类使用filter属性反转background-image。

<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>