@taiga-ui/core/styles/components/button.less

Core library for creating Angular components and applications using Taiga UI

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Button
 * @selector [tuiButton], [tuiIconButton]
 *
 * @description
 * Plain button design, applicable to both links and buttons
 *
 * @attributes
 * data-size — size (default: 'l') ('xs' | 's' | 'm' | 'l')
 *
 * @example
 * <button tuiButton>Click me</button>
 *
 * @see-also
 * Icons, Appearance, Link
 */
[tuiButton],
[tuiIconButton] {
    --t-size: var(--tui-height-l);
    --t-radius: var(--tui-radius-l);
    --t-gap: 0.25rem;
    --t-padding: 0 1.25rem;
    --t-margin: -0.25rem;

    .button-base();

    block-size: var(--t-size);
    justify-content: center;
    border-radius: var(--t-radius);
    padding: var(--t-padding);
    user-select: none;
    cursor: pointer;
    font: var(--tui-font-text-m);
    font-weight: bold;

    > .t-loader {
        .center-all();

        .t-text {
            position: absolute;
        }
    }

    &[data-size='xs'] {
        --t-size: var(--tui-height-xs);
        --t-radius: var(--tui-radius-xs);
        --t-gap: 0.125rem;
        --t-padding: 0 0.375rem;
        --t-margin: -0.125rem;

        font: var(--tui-font-text-s);

        tui-svg,
        tui-icon,
        &::before {
            font-size: 1rem;
        }
    }

    &[data-size='s'] {
        --t-size: var(--tui-height-s);
        --t-radius: var(--tui-radius-s);
        --t-gap: 0.125rem;
        --t-padding: 0 0.625rem;
        --t-margin: -0.125rem;

        font: var(--tui-font-text-s);

        tui-svg,
        tui-icon,
        &:not([tuiIconButton][data-appearance='icon']):not([tuiIconButton][data-appearance='link'])::before {
            font-size: 1rem;
        }
    }

    &[data-size='m'] {
        --t-size: var(--tui-height-m);
        --t-radius: var(--tui-radius-m);
        --t-gap: 0.125rem;
        --t-padding: 0 1rem;
        --t-margin: -0.375rem;

        font: var(--tui-font-text-m);
        font-weight: bold;

        &::after {
            margin-inline-end: -0.125rem;
        }
    }

    &._loading {
        --tui-disabled-opacity: 1;

        -webkit-text-fill-color: transparent;

        > *,
        &::before,
        &::after {
            opacity: 0;
        }

        > .t-loader {
            opacity: 1;
        }
    }

    &[tuiIcons]::after {
        font-size: 1rem;
    }

    &[tuiButtonVertical] {
        // StackBlitz changes "0rem" to "0" breaking calc
        --t-margin: ~'0rem' !important;
        --t-line-height: 1rem;

        flex-direction: column;
        flex-shrink: 1;
        block-size: auto;
        padding: 0.75rem;
        gap: 0.375rem;
        min-inline-size: 5rem;
        white-space: pre-line;
        font: var(--tui-font-text-ui-s);

        & > * {
            max-block-size: calc(var(--t-line-height) * 2);
        }
    }
}

[tuiIconButton] {
    gap: 0;
    inline-size: var(--t-size);
    font-size: 0 !important;
    padding: 0;

    &[data-size='l']::after {
        margin: 0;
    }

    &&[style*='--t-icon-start:']::after {
        display: none;
    }
}