Close button (クローズボタン)

Example

.btn-close を使用してコンポーネントを閉じるかオプションを提供します。 デフォルトのスタイルは制限されていますが, カスタマイズできます。 Sass変数を変更して、デフォルトの background-imageを置き換えます。 aria-labelで行ったように、スクリーンリーダー用のテキストを含めてください

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

Disabled state

無効にした閉じるボタンは、opacity を変更します。また、 pointer-events: none や user-select: none を適用して、ホバー状態とアクティブ状態がトリガーされないようにできます。

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

White variant

デフォルトの .btn-closeを .btn-close-whiteクラスで白に変更します。このクラスは、 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>