Copy environment

Button 

<button type="button" class="button">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  }
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB

Anchor 

<a href="https://play.ee/" class="button">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</a>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text",
    "link": "https://play.ee/"
  }
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--anchor
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Secondary 

<button type="button" class="button button--secondary">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--secondary"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--secondary
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Tertiary 

<button type="button" class="button button--tertiary">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--tertiary"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--tertiary
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Text 

<button type="button" class="button button--text">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--text"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--text
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Icon 

<button type="button" class="button button--icon">
    <span class="button__inner">
        <svg class="icon  button__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
        </svg>
        <span class="button__text">Search</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Search",
    "icon": "search"
  }
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--icon
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Icon Secondary 

<button type="button" class="button button--secondary button--icon">
    <span class="button__inner">
        <svg class="icon  button__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
        </svg>
        <span class="button__text">Search</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Search",
    "icon": "search"
  },
  "modifier": "button--secondary"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--icon-secondary
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Icon Tertiary 

<button type="button" class="button button--tertiary button--icon">
    <span class="button__inner">
        <svg class="icon  button__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
        </svg>
        <span class="button__text">Search</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Search",
    "icon": "search"
  },
  "modifier": "button--tertiary"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--icon-tertiary
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Icon Left 

<button type="button" class="button button--icon-left">
    <span class="button__inner">
        <svg class="icon  button__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#plus"></use>
        </svg>
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text",
    "icon": "plus",
    "iconPosition": "left"
  }
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--icon-left
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Icon Right 

<button type="button" class="button button--icon-right">
    <span class="button__inner">
        <svg class="icon  button__icon" focusable="false">
            <use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#plus"></use>
        </svg>
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text",
    "icon": "plus",
    "iconPosition": "right"
  }
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--icon-right
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Tiny 

<button type="button" class="button button--tiny">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--tiny"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--tiny
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Block

Modifier to force button always full width.

<button type="button" class="button button--block">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--block"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--block
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon

Block Xs

Modifier to force button full width only in mobile.

<button type="button" class="button button--block-xs">
    <span class="button__inner">
        <span class="button__text">Button text</span>
    </span>
</button>
 
{% set element = data.link ? 'a' : 'button' %}
{% set icon = icon|default(data.icon|default(false)) %}
{% set iconPosition = iconPosition|default(data.iconPosition|default(false)) %}

{% set BEM -%}
    button
    {%- if modifier %} {{ modifier }}{% endif %}
    {%- if class %} {{ class }}{% endif %}
    {%- if icon %} button--icon{% if iconPosition %}{{ '-' ~ iconPosition }}{% endif %}{% endif %}
{% endset %}

<{{ element }}
    {% if data.link %} href="{{ data.link }}"{% else %} type="{{ type|default('button') }}" {% endif %}
    class="{{ BEM }}"
    {%- if data.attributes %} {{ data.attributes }}{% endif %}
>
    <span class="button__inner">
        {% if icon %}{% include '@icon' with { name: icon, modifier: '', class: 'button__icon' ~ (iconClass ? ' ' ~ iconClass : '') } %}{% endif %}
        <span class="button__text">{{ data.text }}</span>
    </span>
</{{ element }}>

{
  "language": "en-US",
  "data": {
    "text": "Button text"
  },
  "modifier": "button--block-xs"
}
  • Content: 
    /* Primary */
$button-primary-text: $L-text-weak;
$button-primary-text-hover: $L-text-weak;
$button-primary-text-active: $L-text-weak;
$button-primary-text-disabled: $L-text-weak-disabled;

$button-primary-icon: $L-icon-weak;
$button-primary-icon-hover: $L-icon-weak;
$button-primary-icon-active: $L-icon-weak;

$button-primary-background: $L-background-strong;
$button-primary-background-hover: $L-background-strong-hover;
$button-primary-background-active: $L-background-strong-active;
$button-primary-background-disabled: $L-background-strong-disabled;

/* Secondary */
$button-secondary-text: $L-text-strong;
$button-secondary-text-hover: $L-text-strong;
$button-secondary-text-active: $L-text-strong;

$button-secondary-icon: $L-icon-strong;
$button-secondary-icon-hover: $L-icon-strong;
$button-secondary-icon-active: $L-icon-strong;

$button-secondary-background: $L-background-medium;
$button-secondary-background-hover: $L-background-medium-hover;
$button-secondary-background-active: $L-background-medium-active;

/* Tertiary */
$button-tertiary-text: $L-text-strong;
$button-tertiary-text-hover: $L-text-strong;
$button-tertiary-text-active: $L-text-strong;

$button-tertiary-icon: $L-icon-strong;
$button-tertiary-icon-hover: $L-icon-strong;
$button-tertiary-icon-active: $L-icon-strong;

$button-tertiary-background: transparent;
$button-tertiary-background-hover: $L-background-medium-hover;
$button-tertiary-background-active: $L-background-medium-active;

$button-tertiary-border: $L-border-strong;
$button-tertiary-border-hover: $L-border-strong;

.button {
    position: relative;
    border-radius: 4px;
    border: none;
    -webkit-appearance: none;
    text-align: center;
    cursor: pointer;
    min-width: 124px;
    display: inline-block;
    padding: 8px 16px;
    font-size: $font-size-base;
    font-weight: $font-weight-medium;
    line-height: calc(24 / 16);
    background-color: $button-primary-background;
    color: $button-primary-text;
    text-decoration: none;
    letter-spacing: $letter-spacing-50;

    &:hover {
        background-color: $button-primary-background-hover;
        color: $button-primary-text-hover;
    }

    &:active {
        background-color: $button-primary-background-active;
        color: $button-primary-text-active;
    }

    &:disabled {
        cursor: not-allowed; // stylelint-disable-line
        background-color: $button-primary-background-disabled;
        color: $button-primary-text-disabled;
    }
}

.button--secondary {
    background-color: $button-secondary-background;
    color: $button-secondary-text;

    &:hover {
        background-color: $button-secondary-background-hover;
        color: $button-secondary-text-hover;
    }

    &:active {
        background-color: $button-secondary-background-active;
        color: $button-secondary-text-active;
    }
}

.button--tertiary {
    box-shadow: inset 0 0 0 1px $button-tertiary-border;
    background-color: $button-tertiary-background;
    color: $button-tertiary-text;

    &:hover {
        background-color: $button-tertiary-background-hover;
        color: $button-tertiary-text-hover;
    }

    &:active {
        background-color: $button-tertiary-background-active;
        color: $button-tertiary-text-active;
    }
}

.button--text {
    min-width: 0;
    border-radius: 0;
    background-color: transparent;
    color: $L-text-strong;
    width: auto;
    padding: 0;

    &:hover {
        background-color: transparent;
        color: $L-text-hover;
    }

    &:active {
        background-color: transparent;
        color: $L-text-active;
    }
}

.button--icon {
    min-width: 0;
    padding: 12px;
    border-radius: $border-radius-round;
    border-color: transparent;
}

.button--tiny {
    padding: 8px 16px;
    font-size: $font-size-small;
    min-width: 115px;
}

.button--icon-left,
.button--icon-right {
    position: relative;
}

.button--block {
    display: block;
    width: 100%;
}

.button--block-xs {
    @media only screen and (max-width: ($bp-sm-min - 1)) {
        display: block;
        width: 100%;
    }
}

.button__icon {
    font-size: 24px;
    color: $button-primary-icon;

    .button--icon & {
        display: block;
    }

    .button--icon-left &,
    .button--icon-right & {
        display: inline-block;
        flex: 0 0 24px;
        font-size: 24px;
    }

    .button--secondary & {
        color: $button-secondary-icon;
    }

    .button--text-color & {
        color: inherit;
    }

    .button--secondary:hover & {
        color: $button-secondary-icon-hover;
    }

    .button--secondary:active & {
        color: $button-secondary-icon-hover;
    }

    .button--tertiary & {
        color: $button-tertiary-icon;
    }

    .button--tertiary:hover & {
        color: $button-tertiary-icon-hover;
    }

    .button--tertiary:active & {
        color: $button-tertiary-icon-hover;
    }
}

.button__text {
    letter-spacing: $letter-spacing-50;

    .button--icon & {
        @include visually-hidden();
    }

    .button--icon-left & {
        margin-left: 8px;
    }

    .button--icon-right & {
        margin-right: 8px;
    }
}

.button__inner {
    display: flex;
    align-items: center;
    justify-content: center;

    .button--icon-right & {
        flex-direction: row-reverse;
    }
}
  • URL: /components/raw/button/button.scss
  • Filesystem Path: src/patterns/components/button/button.scss
  • Size: 5.3 KB
  • Content: 
    import './button.scss';

import Icon from '../icon/icon';

export interface IButton {
    text: string;
    icon?: string;
    link?: string;
    iconPosition?: string;
    attributes?: string;
}

export interface IButtonProps {
    data: IButton;
    className?: string;
    iconClassName?: string;
}

export default class Button {
    static render(props: IButtonProps): string {
        const { data, className, iconClassName }: IButtonProps = props;

        const element: string = data.link ? 'a' : 'button';
        const icon: string = data.icon ? Icon.render(data.icon, `button__icon${iconClassName ? ` ${iconClassName}` : ''}`) : '';
        const classArray: string[] = ['button'];

        if (className) {
            classArray.push(className);
        }

        if (data.icon && !data.iconPosition) {
            classArray.push('button--icon');
        }

        if (data.icon && data.iconPosition === 'right') {
            classArray.push('button--icon-right');
        }

        if (data.icon && data.iconPosition === 'left') {
            classArray.push('button--icon-left');
        }

        return `<${element} class="${classArray.join(' ')}" ${data.link ? `href="${data.link}"` : 'type="button"'}${data.attributes ? ` ${data.attributes}` : ''}><span class="button__inner">${icon}<span class="button__text">${data.text}</span></span></${element}>`;
    }
}
  • URL: /components/raw/button/button.ts
  • Filesystem Path: src/patterns/components/button/button.ts
  • Size: 1.4 KB
  • Handle: @button--block-xs
  • Filesystem Path: src/patterns/components/button/button.twig
  • References (1): @icon