{% stories Button with {
  "title": "Atoms/Button",
  "parameters": {
    "componentSubtitle": "Bootstrap Button Component",
    "docs": {
      "description": {
        "component": "Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more"
      },
      "story": {
        "inline": true
      }
    }
  },
  "argTypes": {
    "html_tag": {
      "name": "HTML Tag",
      "description": "The HTML tag to use for the button (button | a). Defaults to `button`.",
      "control": "select",
      "defaultValue": "button",
      "options": {
        "'Button element'": "button",
        "'Anchor button'": "a"
      }
    },
    "color": {
      "name": "Color",
      "description": "Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.",
      "defaultValue": "",
      "control": "select",
      "options": {
        "Primary": "primary",
        "Secondary": "secondary",
        "Success": "success",
        "Info": "info",
        "Warning": "warning",
        "Danger": "danger",
        "Light": "light",
        "Dark": "dark"
      }
    },
    "outline": {
      "name": "Outline",
      "description": "In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.",
      "defaultValue": false,
      "control": "boolean"
    },
    "size": {
      "name": "Size",
      "description": "Bootstrap button size",
      "defaultValue": "",
      "control": "select",
      "options": {
        "'- none -'": "",
        "Small": "btn-sm",
        "Large": "btn-lg"
      }
    },
    "disabled": {
      "name": "Disabled",
      "description": "Disabled button",
      "defaultValue": false,
      "control": "boolean"
    },
    "content": {
      "name": "Content",
      "description": "The content for the button",
      "control": "text",
      "defaultValue": "Button"
    },
    "url": {
      "name": "URL Link",
      "description": "URL link for the button when the HTML tag is an anchor link.",
      "defaultValue": "",
      "control": "text"
    },
    "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 Primary with {
  "name": "Primary",
  "args": {
    "html_tag": "button",
    "color": "primary",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% story Secondary with {
  "name": "Secondary",
  "args": {
    "html_tag": "button",
    "color": "secondary",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% story Success with {
  "name": "Success",
  "args": {
    "html_tag": "button",
    "color": "success",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% story Info with {
  "name": "Info",
  "args": {
    "html_tag": "button",
    "color": "info",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% story Warning with {
  "name": "Warning",
  "args": {
    "html_tag": "button",
    "color": "warning",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% story Danger with {
  "name": "Danger",
  "args": {
    "html_tag": "button",
    "color": "danger",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story Light with {
  "name": "Light",
  "args": {
    "html_tag": "button",
    "color": "light",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story Dark with {
  "name": "Dark",
  "args": {
    "html_tag": "button",
    "color": "dark",
    "outline": false,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlinePrimary with {
  "name": "Outline - Primary",
  "args": {
    "html_tag": "button",
    "color": "primary",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineSecondary with {
  "name": "Outline - Secondary",
  "args": {
    "html_tag": "button",
    "color": "secondary",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineSuccess with {
  "name": "Outline - Success",
  "args": {
    "html_tag": "button",
    "color": "success",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineInfo with {
  "name": "Outline - Info",
  "args": {
    "html_tag": "button",
    "color": "info",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineWarning with {
  "name": "Outline - Warning",
  "args": {
    "html_tag": "button",
    "color": "warning",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineDanger with {
  "name": "Outline - Danger",
  "args": {
    "html_tag": "button",
    "color": "danger",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineLight with {
  "name": "Outline - Light",
  "args": {
    "html_tag": "button",
    "color": "light",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}
  
{% story OutlineDark with {
  "name": "Outline - Dark",
  "args": {
    "html_tag": "button",
    "color": "dark",
    "outline": true,
    "size": "",
    "disabled": false,
    "content": "Button",
    "url": "#",
    "button_utility_classes": []
  }
} %}
{{ include('vartheme_bs5:button') }}
{% endstory %}

{% endstories %}