Confirm React Component

Confirm.css

.wrapper {
    padding: 1em;
    text-align: center;
}

.title {
    font-family: var(--serif, Serif);
    font-weight: normal;
    text-transform: capitalize;
}

.text {
    font-family: var(--sans-serif, sans-serif);
}


.confirm,
.cancel {
    /*Needed for unit tests...*/
}

.buttons {
    display: flex;
    justify-content: center;
    margin-top: 2em;
}

.buttons > *:not(:last-child) {
    margin-right: 1em;
}

Confirm.js

import styles from './Confirm.css';
import join from 'join-classnames';
import Button from '../Button';


const makeHiddensFromObject = obj => (
    Object.keys(obj).map( (key, i) =>
        <input key={i} type="hidden" name={key} value={obj[key]} />
    )
);

export default ({
    title="Are you sure?",
    action,
    method,
    hiddenData={},
    text,
    cancelLabel="No",
    confirmLabel="Yes",
    onSubmit,
    onConfirm,
    onCancel,
    className
}) => (

    <form onSubmit={onSubmit} action={action} method={method} className={join(styles.wrapper, className)}>
        <h1 className={styles.title}>{title}</h1>
        {text && <p className={styles.text}>{text}</p>}
        <div>{makeHiddensFromObject(hiddenData)}</div>
        <div className={styles.buttons}>
            {onCancel && (
                <Button
                    emphasis={false}
                    className={styles.cancel}
                    onClick={onCancel}
                    value={cancelLabel}
                />
            )}

            <Button
                type={action||method||!onConfirm?"submit":"button"}
                className={styles.confirm}
                onClick={onConfirm}
                value={confirmLabel}
            />

        </div>
    </form>