Multiple Variants Per Component

[sam-cuboh]

I was wondering if it would be possible to add support for multiple variants (similar to how classNames work). for example you could have something like

<Anchor variant="caption link" />

which you could then target and style

&[data-variant='caption'] {
    text-transform: uppercase;
  }

&[data-variant='link'] {
    text-decoration: underline;
  }

[rtivital]

Create caption-link variant instead

[sam-cuboh]

That is what I am currently doing. however, we have many overlapping and complex variants, so this solution would allow you to layer and pick and choose variants for different cases cleanly.

[rtivital]

In this case, you can implement that with data-* attributes, like data-link and data-caption

[sam-cuboh]

sounds good thanks! I think the above solution would be a lot cleaner, but this will definitely do the trick.