v3/packages/design-system/atoms/button/Button.tsx

import * as React from 'react';
import {
    Button as StyledButton,
    ButtonComposerOptions,
    IconContainer,
} from './Button.styled';

export type ButtonProps = Partial<ButtonComposerOptions> & {
    children: React.ReactNode;
    icon?: React.ReactNode;
    loading?: boolean;
    onClick?: () => void;
    disabled?: boolean;
};

export const Button = (props: ButtonProps) => {
    const modifiers: ButtonProps['modifiers'] = [];
    if (props.loading) {
        modifiers.push('withLoading');
    }

    if (props.icon) {
        modifiers.push('withIcon');
    }

    return (
        <StyledButton
            size={props.size || 'large'}
            color={props.color || 'primary'}
            modifiers={modifiers}
            onClick={props.onClick}
            disabled={props.disabled}
        >
            {props.icon && <IconContainer>{props.icon}</IconContainer>}
            <div>{props.children}</div>
        </StyledButton>
    );
};