Close Button

Provide an accessible control for dismissing content such as modals and alerts.

100%

<div class="d-flex align-items-center gap-4">
    <twig:CloseButton label="Dismiss notification" />
    <twig:CloseButton disabled label="Dismiss notification" />
    <span class="rounded bg-dark p-3" data-bs-theme="dark">
        <twig:CloseButton label="Dismiss dark notification" />
    </span>
</div>

Installation

php bin/console ux:install close-button --kit bootstrap

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop disabled boolean Whether the close button is disabled. #}
{# @prop label string The accessible label describing the close action. #}
{%- props disabled = false, label = &#039;Close&#039;|trans -%}
{%- set default_attrs = {
    type: &#039;button&#039;,
    class: &#039;btn-close&#039;,
    &#039;aria-label&#039;: label,
} -%}
{%- if disabled -%}
    {%- set default_attrs = default_attrs|merge({disabled: true}) -%}
{%- endif -%}
&lt;button {{ attributes.defaults(default_attrs) }}&gt;&lt;/button&gt;

Usage

<twig:CloseButton />

Accessibility

Always provide a concise label that identifies what the button closes or dismisses. The visible icon is decorative and the accessible name comes from aria-label.

Use the disabled state only when the close action is genuinely unavailable.

Examples

Render a standard close button with an accessible label.

100%

<twig:CloseButton label="Close" />

Disabled state

Disable the button when the dismiss action is unavailable.

100%

<twig:CloseButton disabled label="Close" />

Dark variant

Use Bootstrap's data-bs-theme="dark" color mode on the button or an ancestor. The deprecated .btn-close-white class is intentionally not used.

100%

<div class="d-inline-flex gap-3 rounded bg-dark p-3" data-bs-theme="dark">
    <twig:CloseButton label="Close" />
    <twig:CloseButton disabled label="Close" />
</div>

API Reference

`<twig:CloseButton>`

Prop	Type	Default
`disabled`	`boolean`	`false`
`label`	`string`	-