Skip to main content

Card

Please visit MUI Card Docs for a proper explanation of the Card component.

How to use Text Button inside Card Actions​

If you are using a text button inside the CardActions component, you need to add the .card-actions-dense class along with the CardActions component; otherwise, it will break the alignment.

  • Without the .card-actions-dense class

    Card image 1

  • With the .card-actions-dense class

    Card image 2

Here is the example of how to use the class mentioned above:

<Card>
  <CardContent>...</CardContent>
  <CardActions className='card-actions-dense'>
    <Button variant='text'>Button</Button>
  </CardActions>
</Card>