Button variant should be property

[abdullahtellioglu]

It is not intuitive to set the primary variant via theme property.

Non-intuitive:

<Button theme={"primary"} onClick={() => setEveryone(false)}>

Intuitive:

<Button primary onClick={() => setEveryone(false)}>

[rolfsmeds]

I don't think we should "pollute" the property space of our components by adding a dedicated property to every single theme variant of every component.
Would be nice if we could provide the available option via TypeScript, but as they're not (in all cases) mutually exclusive, I'm not sure how that would be done.

Other component libraries also have similar string properties for their variants, e.g. MUI has a type property on their Button that works similarly to our theme.

[abdullahtellioglu]

You are right, It does not matter how you define it -type="primary"`, `primary`, `theme="primary"- as long as TS shows available options and warnings/errors for invalid values.

[web-padawan]

The main problem is that we have two themes (Lumo and Material) in the web components and they have different values:

• Lumo button: primary, secondary, tertiary, tertiary-inline etc
• Material button: outlined, contained

Furthermore, our TypeScript classes are placed in src folders and they don't know anything about theme values.

Another problem is that theme prop is only declared in React wrappers. In web components the theme is supposed to be set using attribute, not a property (the attribute has matching _theme property but it's intentionally protected).