DIA Frontend

Button 

<!-- ### Begin: Element button ### -->
    <div id="c293" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary btn-sm">
                    Small Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c103" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary btn-lg">
                    Large Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c864" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small text-left">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary">
                    Left Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c756" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small text-center">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary">
                    Center Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c532" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small text-right">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary">
                    Right Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c696" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary btn-block">
                    Block Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c765" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary" disabled>
                    Diabled Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c394" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-primary">
                    Primary Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c930" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-secondary">
                    Secondary Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c619" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-success">
                    Success Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c851" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-danger">
                    Danger Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c145" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-warning">
                    Warning Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c987" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-info">
                    Info Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c438" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-light">
                    Light Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c573" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-dark">
                    Dark Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c732" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-link">
                    Link Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c911" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-primary">
                    outline-Primary Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c237" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-secondary">
                    outline-Secondary Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c68" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-success">
                    outline-Success Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c870" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-danger">
                    outline-Danger Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c936" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-warning">
                    outline-Warning Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c917" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-info">
                    outline-Info Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c528" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-light">
                    outline-Light Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->

    <!-- ### Begin: Element button ### -->
    <div id="c936" class="frame frame-default frame-type-button frame-layout-0 frame-background-none frame-no-backgroundimage frame-space-before-none frame-space-after-none frame-space-inner-before-small frame-space-inner-after-small">
        <div class="frame-container">
            <div class="frame-inner">

                <button class="btn btn-outline-dark">
                    outline-Dark Button
                </button>
            </div>
        </div>
    </div>
    <!-- ### End: Element button ### -->
 
{% for variant in variants %}
    {% include '@frame-button' with variant %}
{% endfor %}
 
{
  "space_inner_before_class": "small",
  "space_inner_after_class": "small",
  "variants": [
    {
      "header": "Small Button",
      "header_style": "sm",
      "header_layout": null
    },
    {
      "header": "Large Button",
      "header_style": "lg",
      "header_layout": null
    },
    {
      "header": "Left Button",
      "header_position": "left"
    },
    {
      "header": "Center Button",
      "header_position": "center"
    },
    {
      "header": "Right Button",
      "header_position": "right"
    },
    {
      "header": "Block Button",
      "button_display_block": true
    },
    {
      "header": "Diabled Button",
      "disabled": true
    },
    {
      "header": "Primary Button",
      "header_layout": "primary"
    },
    {
      "header": "Secondary Button",
      "header_layout": "secondary"
    },
    {
      "header": "Success Button",
      "header_layout": "success"
    },
    {
      "header": "Danger Button",
      "header_layout": "danger"
    },
    {
      "header": "Warning Button",
      "header_layout": "warning"
    },
    {
      "header": "Info Button",
      "header_layout": "info"
    },
    {
      "header": "Light Button",
      "header_layout": "light"
    },
    {
      "header": "Dark Button",
      "header_layout": "dark"
    },
    {
      "header": "Link Button",
      "header_layout": "link"
    },
    {
      "header": "outline-Primary Button",
      "header_layout": "outline-primary"
    },
    {
      "header": "outline-Secondary Button",
      "header_layout": "outline-secondary"
    },
    {
      "header": "outline-Success Button",
      "header_layout": "outline-success"
    },
    {
      "header": "outline-Danger Button",
      "header_layout": "outline-danger"
    },
    {
      "header": "outline-Warning Button",
      "header_layout": "outline-warning"
    },
    {
      "header": "outline-Info Button",
      "header_layout": "outline-info"
    },
    {
      "header": "outline-Light Button",
      "header_layout": "outline-light"
    },
    {
      "header": "outline-Dark Button",
      "header_layout": "outline-dark"
    }
  ]
}

No notes defined.