Как красиво и правильно сделать в компоненте кнопки её вариации?

Question

[luxurypluxury]

У меня есть около 6 вариантов кнопки, вариацию передаю через пропс, как красивее это оформить?

Answer 1

[repcolding]

https://www.npmjs.com/package/classnames - очень удобная библиотека

import styles from './Button.scss'
import cn from 'classnames'

const Button = (props) => {
  const { theme, size, children } = props

  const classList = cn(styles.button, {
    [styles.buttonPrimary]: theme === 'primary',
    [styles.buttonGhost]: theme === 'ghost',
    [styles.buttonSmall]: size === 'small'
  })

  return <button className={classList}>{children}</button>
}

export default Button

Без css модулей:

import './Button.scss'
import cn from 'classnames'

const Button = (props) => {
  const { theme, size, children } = props
  
  const classList = cn('button', {
    'button--primary': theme === 'primary',
    'button--ghost': theme === 'ghost',
    'button--small': size === 'small'
  })

  return (
    <button className={classList}>{children}</button>
  )
}

export default Button

Answer 2

[luxurypluxury]

Пока думаю так

{variation === 'primary' &&
            <button className={styles.button__primary}>
                    {text}
            </button>
 }
{variation === 'secondary' &&
                <button className={styles.button__secondary}>
                    {text}
                </button>
}

Comments

[repcolding]

Не жизни способный вариант. Если у вас 6 кнопок, и наполнение из 4 тегов. То изменять нужно будет в 6 местах, синхронизировать их

[WbICHA]

Всё отличие в классе? Почему бы тогда тупо не оставить одну кнопку и выбирать класс через объект?