Bootstrap 5.2 / Componenten

Close button

Een algemene sluitknop om content zoals modals en alerts weg te klikken.

Voorbeeld

Bied met .btn-close een manier om een component te sluiten of weg te klikken. De standaardstyling is beperkt, maar zeer aanpasbaar. Pas de Sass-variabelen aan om de standaard-background-image te vervangen. Zorg dat je tekst voor schermlezers meegeeft, zoals wij met aria-label doen.

HTML

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

Uitgeschakelde status

Uitgeschakelde sluitknoppen wijzigen hun opacity. We hebben ook pointer-events: none en user-select: none toegepast om te voorkomen dat hover- en active-states worden geactiveerd.

HTML

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

Witte variant

Maak de standaard-.btn-close wit met de klasse .btn-close-white. Deze klasse gebruikt de eigenschap filter om de background-image te inverteren.

HTML

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

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.