Button images forced to 14px?

It appears that any images inside a button are forced to a height (at least–not sure about width since I’m using square images) of 14px.

If that’s true, is there any way to override it? CSS overrides don’t seem to work.

Or is that considered a UX violation?

I guess I could construct my own buttons.

If you’re using <button>, the images are constrained to 14px. You can create your own buttons if you need them to be larger (or if you want to use SVG, for example, since buttons can render that yet).

It’s not a violation to override it with your own buttons – just try to ensure that you have some accessibility tab-index: 0, and provide focus states.

(The reason the images are constrained are because you’re now in the native rendering code, and at that point we’re at the mercy of the native layout inside the button.)

OK, thanks.

It doesn’t appear that SVG as images in buttons works. Is that true?

Yup. It’s on our backlog. Right now if you want to render SVGs, you have to build your own. See the e2e-adobe-stock plugin for an example (it does the same thing).