How to optimise my button component?

Answered

Japanese Bobtail posted this in #help-forum

Japanese BobtailOP

2025-01-03T16:44:41.145Z

This is a part of my button component. In some cases i need to have a link instead of a button element (the styles are same). Is it possible to have a "dynamic" component name link "<button|Link">... or whats the best practice to build this class?

import React from 'react';
import Link from 'next/link';

const Button = ({
    style = 'primary',
    type = 'button',
    role = 'button',
    fullWidth = false,
    iconOnly = false,
    href,
    target,
    icon,
    title,
    disabled,
    submitting,
    onClick,
    className,
    ariaLabel,
    children,
}) => {
    if(href) {
        return (
            <Link
                href={href}
                target={target}
                type={type}
                title={title}
                onClick={onClick}
                disabled={disabled}
                role={role}
                aria-label={ariaLabel}
                className={classes}
            >
                {icon}
                {children}
            </Link>
        );
    }

    return (
        <button
            type={type}
            title={title}
            onClick={onClick}
            disabled={disabled}
            role={role}
            aria-label={ariaLabel}
            className={classes}
        >
            {icon}
            {children}
        </button>
    );
};

export default Button;

Answered by B33fb0n3

yes, you can apply the styles to it's own component. Like that you can use the Button component normally and if you want to have something that should only look like a button you can apply the classes as well:

<Link href='#' className={buttonVariants()}>I look like a Button</Link>

The button component itself could look like this: https://paste.gg/p/B33fb0n3/91c31be4aa16414ca25243fdcaa1f860

Orange box: Styling with variants
Yellow box: Actual button component

View full answer

5 Replies

@Japanese Bobtail This is a part of my button component. In some cases i need to have a link instead of a button element (the styles are same). Is it possible to have a "dynamic" component name link "<button|Link">... or whats the best practice to build this class? `import React from 'react'; import Link from 'next/link'; const Button = ({ style = 'primary', type = 'button', role = 'button', fullWidth = false, iconOnly = false, href, target, icon, title, disabled, submitting, onClick, className, ariaLabel, children, }) => { if(href) { return ( <Link href={href} target={target} type={type} title={title} onClick={onClick} disabled={disabled} role={role} aria-label={ariaLabel} className={classes} > {icon} {children} </Link> ); } return ( <button type={type} title={title} onClick={onClick} disabled={disabled} role={role} aria-label={ariaLabel} className={classes} > {icon} {children} </button> ); }; export default Button;`

B33fb0n3

2025-01-03T16:50:03.267Z

<Link href='#' className={buttonVariants()}>I look like a Button</Link>

The button component itself could look like this: https://paste.gg/p/B33fb0n3/91c31be4aa16414ca25243fdcaa1f860

Orange box: Styling with variants
Yellow box: Actual button component

Answer

@B33fb0n3 yes, you can apply the styles to it's own component. Like that you can use the ``Button`` component normally and if you want to have something that should only look like a button you can apply the classes as well: tsx <Link href='#' className={buttonVariants()}>I look like a Button</Link> The button component itself could look like this: https://paste.gg/p/B33fb0n3/91c31be4aa16414ca25243fdcaa1f860 Orange box: Styling with variants Yellow box: Actual button component

Japanese BobtailOP

2025-01-03T18:45:14.307Z

Thanks. I'am trying to refactor my component. Whats does cn in your example?

@Japanese Bobtail Thanks. I'am trying to refactor my component. Whats does cn in your example?

B33fb0n3

2025-01-03T18:52:02.281Z

it put two string together.