[Documentation] Depressed button not working

[thany]

Environment

Browsers: Firefox 106.0 OS: Windows 10

Steps to reproduce

Toggle depressed and observe how nothing changes.

Expected Behavior

Further down, it says the depressed prop should remove the shadow, but it doesn't.

Actual Behavior

Changing the depressed prop in the "Usage" pane doesn't do anything.

Reproduction Link

https://vuetifyjs.com/en/components/buttons/#usage

Other comments

Also worth nothing the toggles for light and dark are missing.

[MajesticPotatoe]

Not so much that it doesn't do anything, its just that elevation overrides the effects of it (depressed removes the box shadow, elevation adds it back). light/dark toggles are in the top right of every example.

[thany]

Isn't that a more structural problem then? That it is, apparently, a thing to have two props that are sort of fighting each other?

In other words, what is the point of having a depressed prop, when elevation=0 does the exact same thing? There are other similar examples of this behaviour where two props might sort of cancel each other out. For example, in v-card the props tile removes the border-radius, but rounded adds it back (or the other way round - there's no way to know, and neither way round is guaranteed).

/edit But to be fair, when I remove elevation, indeed the box-shadow is gone. But then depressed still doesn't make any difference, because without the elevation prop, the button is visually always depressed. This further confirms my concern that the depressed prop really isn't doing much of anything... Try it yourself, you'll see what I mean. No matter what state you put the button in, no matter which props you set, add, or remove, the depressed prop will never make any difference.