CODEWITHSUNDEEP
javascriptmaterial-ui
Tomo10
Tomo10

Reputation: 309

Why Button has to be wrap with CardActions in MUI

I was reading the Card documentation on MUI and notice the Button in the card is always wrapped with CardActions, and I don't know really understand what that tag serves as it doesn't really explained in the documentation. Only noticeble attributes on their API and while I was playing is disableSpacing, which disable the margin and spacing between the buttons. The similar tag, CardActionArea makes more sense as it turns component in the Card to be interactive and it inherits ButtonBase, but CardActions only inherits native component. Is there more to this tag that I'm missing?

Upvotes: 0

Views: 696

Answers (1)

Sam A.
Sam A.

Reputation: 712

Nowhere in the docs does it say that it has to be wrapped with CardActions. CardHeader, CardContent, CardActions, CardMedia, and CardActionArea are just inner convenience containers with preset settings to organize things inside the card according to Material's design vision. The main differences are seen in the padding and spacing. CardAction has a padding of 1 (8px), CardContent 2 (16px), CardMedia 0. And the spacing inside CardAction is 2 vs CardContent 1.

If your design doesn't need the convenience of these containers, it's perfectly ok to use Button by itself. Though in that case why use the Card component at all; just use the simpler Paper component instead.

Upvotes: 2

Related Questions