Issue #3292592 by mapac, Grimreaper: Bootstrap 5 : Components > Close button

templates/patterns/close_button/close_button.ui_patterns.yml

+close_button:
+  label: "Close button"
+  description: "A generic close button for dismissing content like modals and alerts. https://getbootstrap.com/docs/5.2/components/close-button"
+  category: "Button"
+  variants:
+    default:
+      label: "Default"
+    white:
+      label: "White"
+  settings:
+    disabled:
+      type: "boolean"
+      label: "Disabled?"
+      description: "Is the button disabled?"
+      preview: false
+      allow_expose: true
+      allow_token: true
+    aria_label:
+      type: "textfield"
+      label: "Aria label"
+      description: "Name of the close button for assistive technology."
+      preview: "Close"
+      allow_token: true

templates/patterns/close_button/pattern-close-button--variant-white--preview.html.twig

+<div class="bg-dark">
+  {{ include('pattern-close-button.html.twig') }}
+</div>

templates/patterns/close_button/pattern-close-button.html.twig

+{% if variant and variant|lower != 'default' %}
+  {% set attributes = attributes.addClass('btn-close-' ~ variant) %}
+{% endif %}
+{% set attributes = attributes.addClass('btn-close') %}
+
+{% set attributes = attributes.setAttribute('aria-label', aria_label|default('Close'|t)) %}
+{% if disabled %}
+  {% set attributes = attributes.setAttribute('disabled', disabled) %}
+{% endif %}
+
+<button{{ attributes.setAttribute('type', 'button') }}></button>