<h2 class="mb-3">
Examples
</h2>
<p>
<button class="btn btn-primary">
Primary
</button>
<button class="btn btn-secondary">
Secondary
</button>
<button class="btn btn-success">
Success
</button>
<button class="btn btn-danger">
Danger
</button>
<button class="btn btn-warning">
Warning
</button>
<button class="btn btn-info">
Info
</button>
<button class="btn btn-light">
Light
</button>
<button class="btn btn-dark">
Dark
</button>
<button class="btn btn-link">
Link
</button>
</p>
<hr />
<h2 class="mb-3">
Outline buttons
</h2>
<p>
<button class="btn btn-outline-primary">
Primary
</button>
<button class="btn btn-outline-secondary">
Secondary
</button>
<button class="btn btn-outline-success">
Success
</button>
<button class="btn btn-outline-danger">
Danger
</button>
<button class="btn btn-outline-warning">
Warning
</button>
<button class="btn btn-outline-info">
Info
</button>
<button class="btn btn-outline-light">
Light
</button>
<button class="btn btn-outline-dark">
Dark
</button>
</p>
<hr />
<h2 class="mb-3">
Sizes
</h2>
<p>
<button class="btn btn-primary btn-lg">
Large button
</button>
<button class="btn btn-secondary btn-lg">
Large button
</button>
</p>
<p>
<button class="btn btn-primary btn-sm">
Large button
</button>
<button class="btn btn-secondary btn-sm">
Large button
</button>
</p>
<p>
<button class="btn btn-primary btn-lg btn-block">
Large button
</button>
<button class="btn btn-secondary btn-lg btn-block">
Large button
</button>
</p>
<hr />
<h2 class="mb-3">
Active state
</h2>
<p>
<button class="btn btn-primary btn-lg active" aria-pressed="true">
Primary link
</button>
<button class="btn btn-secondary btn-lg active" aria-pressed="true">
Link
</button>
</p>
<hr />
<h2 class="mb-3">
Disabled state
</h2>
<p>
<button class="btn btn-primary btn-lg" disabled>
Primary link
</button>
<button class="btn btn-secondary btn-lg" disabled>
Link
</button>
</p>
<p>
<a class="btn btn-primary btn-lg disabled" href="#">
Primary link
</a>
<a class="btn btn-secondary btn-lg disabled" href="#">
Link
</a>
</p>
<hr />
{% block main %}
{% for section in sections %}
{% if section %}
{% if section.title %}
<h2 class="mb-3">
{{ section.title }}
</h2>
{% endif %}
{% for buttons in section.subsections %}
<p>
{% for button in buttons %}
{% include '@atom-button' with button %}
{% endfor %}
</p>
{% endfor %}
{% endif %}
<hr />
{% endfor %}
{% endblock %}
{
"sections": [
{
"title": "Examples",
"subsections": {
"buttonsDefault": [
{
"header": "Primary",
"header_layout": "primary"
},
{
"header": "Secondary",
"header_layout": "secondary"
},
{
"header": "Success",
"header_layout": "success"
},
{
"header": "Danger",
"header_layout": "danger"
},
{
"header": "Warning",
"header_layout": "warning"
},
{
"header": "Info",
"header_layout": "info"
},
{
"header": "Light",
"header_layout": "light"
},
{
"header": "Dark",
"header_layout": "dark"
},
{
"header": "Link",
"header_layout": "link"
}
]
}
},
{
"title": "Outline buttons",
"subsections": {
"buttonsOutline": [
{
"header": "Primary",
"header_layout": "outline-primary"
},
{
"header": "Secondary",
"header_layout": "outline-secondary"
},
{
"header": "Success",
"header_layout": "outline-success"
},
{
"header": "Danger",
"header_layout": "outline-danger"
},
{
"header": "Warning",
"header_layout": "outline-warning"
},
{
"header": "Info",
"header_layout": "outline-info"
},
{
"header": "Light",
"header_layout": "outline-light"
},
{
"header": "Dark",
"header_layout": "outline-dark"
}
]
}
},
{
"title": "Sizes",
"subsections": {
"buttonsLarge": [
{
"header": "Large button",
"header_layout": "primary",
"header_style": "lg"
},
{
"header": "Large button",
"header_layout": "secondary",
"header_style": "lg"
}
],
"buttonsSmall": [
{
"header": "Large button",
"header_layout": "primary",
"header_style": "sm"
},
{
"header": "Large button",
"header_layout": "secondary",
"header_style": "sm"
}
],
"buttonsBlock": [
{
"header": "Large button",
"header_layout": "primary",
"header_style": "lg",
"button_display_block": 1
},
{
"header": "Large button",
"header_layout": "secondary",
"header_style": "lg",
"button_display_block": 1
}
]
}
},
{
"title": "Active state",
"subsections": {
"buttonsActiveState": [
{
"header": "Primary link",
"header_layout": "primary",
"header_style": "lg",
"active": true
},
{
"header": "Link",
"header_layout": "secondary",
"header_style": "lg",
"active": true
}
]
}
},
{
"title": "Disabled state",
"subsections": {
"buttonsDisabled": [
{
"header": "Primary link",
"header_layout": "primary",
"header_style": "lg",
"disabled": true
},
{
"header": "Link",
"header_layout": "secondary",
"header_style": "lg",
"disabled": true
}
],
"buttonsDisabledLinks": [
{
"header": "Primary link",
"header_layout": "primary",
"header_style": "lg",
"href": "#",
"disabled": true
},
{
"header": "Link",
"header_layout": "secondary",
"header_style": "lg",
"href": "#",
"disabled": true
}
]
}
}
]
}
No notes defined.