{% stories CloseButton with {
  "title": "Atoms/Close Button",
  "parameters": {
    "componentSubtitle": "Bootstrap Close Button Component",
    "docs": {
      "description": {
        "component": "A generic close button for dismissing content like modals and alerts."
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "size": {
      "name": "Size",
      "description": "Bootstrap button size class",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Small": "btn-sm",
        "Large": "btn-lg"
      }
    },
    "disabled": {
      "name": "Disabled",
      "description": "Disabled button",
      "defaultValue": false,
      "control": "boolean"
    },
    "close_button_utility_classes": {
      "name": "Utility Classes",
      "description": "An array of utility classes that can be used to add extra Bootstrap utility classes or custom classes to this component.",
      "control": "object",
      "defaultValue": []
    },
    "attributes": {
      "name": "Attributes",
      "description": "HTML attributes for the containing element.",
      "control": "object",
      "defaultValue": {}
    }
  }
} %}

{% story Small with {
  "name": "Small",
  "args": {
    "size": "btn-sm",
    "disabled": false,
    "close_button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:close-button') }}
{% endstory %}

{% story Large with {
  "name": "Large",
  "args": {
    "size": "btn-lg",
    "disabled": false,
    "close_button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:close-button') }}
{% endstory %}

{% story Disabled with {
  "name": "Disabled",
  "args": {
    "size": "",
    "disabled": true,
    "close_button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:close-button') }}
{% endstory %}

{% endstories %}
