Unelevated button's

[nevf]

@finnhvman Are you planning on implementing Unelevated Buttons as per https://material.io/design/components/buttons.html#

I ask because the drop-shadow used with contained buttons is an issue if the element the button is inside of, doesn't have sufficient margins to display the box shadow, causing it to be clipped as shown here.

In this particular use case an unelevated button would be better UX IMO.

[finnhvman]

Hey @nevf! The plan is to add Unelevated Button to Matter as well, but it will come after the first official release of the library, which I have to work on.

Until then, you could override the box-shadow to make the Contained Button Unelevated like this:

.matter-button-contained {
    box-shadow: none !important;
}

One side note, if the problem is that the shadow is clipped, it might be a sign of the spacing being too small.

[nevf]

@finnhvman I had already used box-shadow: none !important; ;-)

The issue with box-shadow occurred because it's parent element didn't specify any height and box-shadow isn't taken into account for the height calculation, at least that's what I assume.

[finnhvman]

@nevf I see! 🙂

Yeah, box-shadow isn't part of the content. You could add margin to allow some space around the button. I didn't add default margins to the components, because every user needs different values and this feels especially true in case of Flex or Grid layouts.

[nevf]

@finnhvman That's fine. I wonder if its worth adding default margins to match the size of the box-shadow so folks won't run into this issue. Users can always override that. Just a thought.

[finnhvman]

@nevf I think it's worth adding default margins, but that brings some questions:

1. What should be the default margin size?
2. Should the vertical and horizontal margins be equal?
3. Should the top and bottom margins be equal?
4. Should the default margins be the same for every component?
5. Should the margins have their own themeable variable (i.e. --matter-margin)?

Moreover, I feel like margins don't come handy when they are on a Flex or Grid item, so for now I went with the simplest choice: no margins.

What do you think? 🙂

[fel-thomas]

✋ @finnhvman I also encounter this situation in a project, and I feel that the best solution to me is to add margin when it occurs, not put it by default 😃

[finnhvman]

@napolar thanks for your comment!

Further comments about margin are welcome, although a new issue might better because this is about the unelevated button.

[finnhvman]

Commit aacd697ae2676e62184f496939fc5f8a98b1bd25 adds Unelevated Button.

This issue will be closed after the next release.