What css/ui libraries should I use for adding theme extensions, lets say I wan't to add a button

[Moonloon]

I want to make an extension that will look like a button and a pop up that is shown after button is clicked.

What css/ui libs are recommended to be used for this case?

I want this button to match style of stores that will install this extension.

Can/should I use css classes defined in Dawn theme? or should I use some third party libs, I want to minimize merchant work in styling so it would look natural to their store.

[JayAdra · Accepted solution]

Don't rely on using CSS classes from a specific theme. It won't work on a lot of other themes.

Our approach with theme extensions is to use basic HTML elements (like button, p, a, label etc.) which should pull styling on most themes to appear somewhat consistent, and then we apply our own custom CSS for some base styles/overrides as needed.

It's never perfect, and can never match their theme guaranteed, but you can get close with this approach I've found, and then fix up anything extra with custom CSS.

I'd also recommend avoiding CSS/UI libraries if you care about your merchant and their customer's experience; it'll add a lot of extra code that's unnecessary. If possible, write your own styles and build your own simple and clean components.

One other tip - if adding your own custom CSS, make sure you target your own custom CSS classes (and make them unique). So you avoid conflicting with other elements on their store, create unique classes for your extension only and target those.