Close button

Bootstrap

Bootstrap btn-close, restyled. Sizes and examples below; usage → Rules.

Sizes

Sqrl custom

Class	Use
btn-close btn-close-sm	Toasts, dense UI
btn-close (medium; btn-close-md alias)	Modals, offcanvas headers
btn-close btn-close-lg	Larger surfaces when needed

Always set aria-label="Close" (or a specific label).

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

Rules

Where to use

• Dismissible toasts, modals, alerts, and offcanvas headers.
• Not as a generic icon control — use btn-ghost + Bootstrap Icon instead (Iconography).

Dark surfaces

Do not use btn-close-white. On a dark surface, set data-bs-theme="dark" on the button or parent.

Disabled

Bootstrap disabled behaviour (reduced opacity, no pointer events) applies as usual.