Quasar Buttons are of two shapes: rectangle (regular) and circular. They come in three sizes: small, medium (default) and big. As for the colors, use the ones from Quasar CSS Color Palette. There are some more CSS classes that you can use to enhance the appearance of a button.
For circular buttons only use icons as content.
When adding an icon to a regular button, use
on-right CSS classes:
big CSS classes. You don’t need to specify
medium because that’s the default size.
Use the ones from Quasar CSS Color Palette. Examples:
There are also the
glossy CSS classes that you can use.
Make use of globally available
block (sets CSS
display property to
There’s also a type of button that has its own Quasar Component named
<q-progress-button>. Check documentation here.