<button class="inline-flex items-center no-underline transition leading-none select-none outline-none focus:outline-none relative text-white cursor-not-allowed bg-blue-300 h-10 px-4 text-base rounded ">
Button label
</button>
{% set btnClasses = [classes.base, classes.theme.common] %}
{% if isBlock %}
{% set btnClasses = (btnClasses.push(classes.block), btnClasses) %}
{% endif %}
{# SET THEME STYLES #}
{% if isLoading %}
{% set btnClasses = (btnClasses.push(classes.theme.loading), btnClasses) %}
{% elif isDisabled %}
{% set btnClasses = (btnClasses.push(classes.theme.disabled), btnClasses) %}
{% else %}
{% set btnClasses = (btnClasses.push(classes.theme.default), btnClasses) %}
{% endif %}
{# SET SIZE STYLES #}
{% if size =='small' %}
{% set btnClasses = (btnClasses.push(classes.size.small), btnClasses) %}
{% elif size =='large' %}
{% set btnClasses = (btnClasses.push(classes.size.large), btnClasses) %}
{% else %}
{% set btnClasses = (btnClasses.push(classes.size.default), btnClasses) %}
{% endif %}
{# SET RESULT CLASSES #}
{% set btnClassesResult = (btnClasses.join(' ')) %}
<button class="{{btnClassesResult}} ">
{{label}}
</button>
{
"label": "Button label",
"isLoading": false,
"isDisabled": true,
"isBlock": false,
"size": "default",
"classes": {
"base": "inline-flex items-center no-underline transition leading-none select-none outline-none focus:outline-none relative",
"block": "w-full justify-center",
"size": {
"small": "h-7 px-3 text-xs rounded-sm",
"default": "h-10 px-4 text-base rounded",
"large": "h-12 px-5 text-xl rounded-md"
},
"theme": {
"common": "text-white",
"default": "focus:ring-2 ring-blue-400 ring-opacity-50 bg-blue-400 hover:bg-blue-500 active:bg-blue-600 active:translate-y-0.5",
"disabled": "cursor-not-allowed bg-blue-300",
"loading": "text-opacity-0 bg-blue-400 cursor-not-allowed after:border-r-transparent after:border-white after:animate-spin after:rounded-full after:w-4 after:h-4 after:left-1/2 after:top-1/2 after:block after:absolute after:border-2 after:-ml-2 after:-mt-2"
}
}
}
No notes defined.