<button class="button" type="button" disabled>
<span class="button__text u-underline">Button-Text</span>
</button>
{% set link = link | default(null) %}
{% set showInternal = showInternal ?? false %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, showInternal=showInternal) %}
{% set iconPosition = iconPosition ?? 'before' %}
{% set tag = link ? 'a' : 'button' -%}
{% set button = html_cva(
base: 'button',
variants: {
secondary: {
false: null,
true: 'button--secondary',
},
overlay: {
false: null,
true: 'u-overlay-link',
},
},
) %}
<{{ tag }} {{ html_attributes({
id: id ?? false,
class: button.apply({
overlay: overlay ?? false,
secondary: secondary ?? false,
}),
type: not link ? (type ??? 'button'),
title: title ?? false,
disabled: disabled ?? false,
}, linkAttrs ?? link_attributes(link, type=linkType), attrs ?? {}) }}>
{% if icon and iconPosition == 'before' %}
<span class="button__icon">
{% include '@icon' with { icon: icon } only %}
</span>
{% endif -%}
{% if text|default %}
<span class="button__text u-underline">
{{- text -}}
</span>
{% endif -%}
{% if icon and iconPosition == 'after' %}
<span class="button__icon">
{% include '@icon' with { icon: icon } only %}
</span>
{% endif %}
</{{ tag }}>
{
"link": false,
"text": "Button-Text",
"disabled": true
}
.button {
--_button-border-width: var(--button-border-width, 0);
--_button-padding-inline: var(--button-padding-inline, 2rem);
--_button-min-block-size: var(--button-min-block-size, 4.2rem);
align-items: center;
background-color: var(--button-background-color, var(--color-steel-700));
border-color: var(--button-border-color, transparent);
border-radius: var(--button-border-radius, 99999px);
border-style: var(--button-border-style, solid);
border-width: var(--_button-border-width);
color: var(--button-color, var(--color-white));
column-gap: 0.5em;
cursor: default;
display: flex;
font-family: inherit;
font-size: var(--button-font-size, 1.5rem);
font-weight: var(--button-font-weight, var(--font-weight-bold));
inline-size: var(--button-inline-size, fit-content);
isolation: isolate;
justify-content: center;
line-height: var(--button-line-height, 1.25);
max-inline-size: 100%;
min-block-size: var(--_button-min-block-size);
opacity: 1;
padding-block: calc((var(--_button-min-block-size) - 1lh) / 2 - var(--_button-border-width));
padding-inline: var(--_button-padding-inline);
scale: 1;
text-align: center;
text-transform: var(--button-text-transform, uppercase);
transition-property: background-color, border-color, color, opacity, scale;
user-select: none;
white-space: var(--button-white-space, normal);
&:has(.button__icon:only-child) {
inline-size: var(--_button-min-block-size);
padding-inline: 0;
}
&:is(button:not([disabled]), :any-link) {
cursor: pointer;
}
&:is(button:not([disabled]), :any-link):is(:hover, :focus-visible, :active) {
background-color: var(--button-background-color--engaged, var(--color-orange-600));
border-color: var(--button-border-color--engaged, transparent);
color: var(--button-color--engaged, var(--color-white));
}
&:is(button:not([disabled]), :any-link):is(:active) {
scale: 0.98;
}
&:is([disabled]) {
background-color: var(--button-background-color--disabled, var(--color-gray-100));
border-color: var(--button-border-color--disabled, transparent);
color: var(--button-color--disabled, var(--color-gray-700));
cursor: not-allowed;
opacity: 1;
}
}
.button--secondary {
--button-background-color--engaged: var(--color-white);
--button-background-color: var(--color-orange-600);
--button-border-color--engaged: var(--color-orange-600);
--button-border-color: var(--color-orange-600);
--button-border-width: 2px;
--button-color--engaged: var(--color-orange-600);
--button-color: var(--color-white);
--button-font-weight: var(--font-weight-semibold);
--button-text-transform: none;
}
.button__icon {
--icon-size: var(--button-icon-size, 1.25em);
color: currentColor;
display: flex;
margin-block-start: calc((1lh - var(--icon-size)) / 2);
}
No notes defined.