Buttons


Button styles

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Primary', 'primary', 'submit') }}
{{ buttons.button('Danger', 'danger', 'submit') }}
{{ buttons.button('Info', 'info', 'submit') }}
{{ buttons.button('Success', 'success', 'submit') }}
{{ buttons.button('Warning', 'warning', 'submit') }}
{{ buttons.button('Dark', 'dark', 'submit') }}
{{ buttons.button('Light', 'light', 'submit') }}
{{ buttons.button('Link', 'link', 'submit') }}

Outline buttons

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Primary', 'outline-primary', 'submit') }}
{{ buttons.button('Danger', 'outline-danger', 'submit') }}
{{ buttons.button('Info', 'outline-info', 'submit') }}
{{ buttons.button('Success', 'outline-success', 'submit') }}
{{ buttons.button('Warning', 'outline-warning', 'submit') }}
{{ buttons.button('Dark', 'outline-dark', 'submit') }}
{{ buttons.button('Light', 'outline-light', 'submit') }}
{{ buttons.button('Link', 'outline-link', 'submit') }}

Flat buttons

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Primary', 'flat-primary', 'submit') }}
{{ buttons.button('Danger', 'flat-danger', 'submit') }}
{{ buttons.button('Info', 'flat-info', 'submit') }}
{{ buttons.button('Success', 'flat-success', 'submit') }}
{{ buttons.button('Warning', 'flat-warning', 'submit') }}
{{ buttons.button('Dark', 'flat-dark', 'submit') }}
{{ buttons.button('Light', 'flat-light', 'submit') }}
{{ buttons.button('Link', 'flat-link', 'submit') }}

Floating action button

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.floating_action_button('add', 'primary') }}
{{ buttons.floating_action_button('add', 'danger') }}
{{ buttons.floating_action_button('add', 'info') }}
{{ buttons.floating_action_button('add', 'success') }}
{{ buttons.floating_action_button('add', 'warning') }}
{{ buttons.floating_action_button('add', 'dark') }}
{{ buttons.floating_action_button('add', 'light') }}
{{ buttons.floating_action_button('add', 'link') }}

Button tags

Link
{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Button', 'primary', 'button') }}
{{ buttons.button('Submit', 'primary', 'submit') }}
{{ buttons.button('Reset', 'primary', 'reset') }}
{{ buttons.link('Link', 'primary', 'https://leviy.com') }}

Disabled state

Link
{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Primary', 'primary', 'submit', true) }}
{{ buttons.button('Link', 'link', 'submit', true) }}
{{ buttons.link('Link', 'primary', 'https://leviy.com', true) }}

Data attributes (inspect element to see data-* attributes)

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.button('Button', 'primary', 'submit', false, { 'test': 'test' }) }}
{{ buttons.link('Link', 'primary', 'https://leviy.com', false, { 'test': 'test' }) }}
{{ buttons.floating_action_button('add', 'primary', '', 'https://leviy.com', false, { 'test': 'test' }) }}

Target attribute

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.link('Link', 'primary', 'https://leviy.com', false, { 'test': 'test' }, '_blank') }}

Icon buttons

{% import '@leviy-templates/macros/buttons.html.twig' as buttons %}

{{ buttons.icon('people', 'Button title', 'extra-class', 'https://leviy.com', false, { 'test': 'test' }, 'id') }}
{{ buttons.icon('people', 'Button title', 'extra-class', 'https://leviy.com', true, { 'test': 'test' }, 'id') }}