0

I have component button

<button type="button" className="button button_size_large button_color_primary button_type_fill">
    <Icon className="button__icon" type={'bc-icon-info'} disabled={false} isFilled={true} />
    <span className="button__text">Button</span>
</button>

each of modifiers changes

  • button_color_primary
    • button_type_fill
    • button_type_outline
    • button_type_text
  • button_color_secondary
    • button_type_fill
    • button_type_outline
    • button_type_text
  • button_color_danger
    • button_type_fill
    • button_type_outline
    • button_type_text

and so on ...

In scss i have created this

    &_color_primary {
        &.button_type_fill {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
        &.button_type_outline {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
        &.button_type_text {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
    }

And this way for _secondary , _danger. I think this is not good approach. Please provide your suggestions .

Improve this question

1 Answer 1

Reset to default
-1

You can set global style for global selector like button_type_fill and then only set color in variant like button_color_primary

Improve this answer
2
  • This is not BEM approach.
    – Garo Gabrielyan
    Commented Jul 8 at 18:14
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Jul 8 at 23:07

Not the answer you're looking for? Browse other questions tagged or ask your own question.