Question 1

What happens if I set flat and outline on the same q-btn?

Accepted Answer

Only one design applies. QBtn checks the design props in a fixed order, flat, then outline, then push, then unelevated, and uses the first one it finds, so flat plus outline renders a flat button. A q-btn with none of them is the standard filled button with a shadow. glossy is not a design and can be added to any of them.

Question 2

Why does color change the text on a flat or outline button?

Accepted Answer

On a flat or outline button there is no background to fill, so color goes to the text and, for outline, the border. On a standard, unelevated or push button, color sets the background and the text turns white. Add text-color when the text needs a different color, for example color="grey-2" with text-color="grey-9" for a light button.

Question 3

How do I make an accessible round icon button?

Accepted Answer

A round button with only an icon has no text for a screen reader to announce. QBtn has no aria-label prop, but the attribute falls through to the rendered button, so write aria-label="Delete row" on the q-btn. A q-tooltip inside the button is announced as its description, not its name, so it does not replace the aria-label. The generator writes the label as aria-label when you pick the round shape with an icon.

Question 4

How do I show a loading spinner while a request runs?

Accepted Answer

Bind the loading prop to a ref: :loading="submitting". Set submitting to true before the request and back to false in a finally block. While loading is true, QBtn shows a spinner in place of its icon and label, keeps its width, and ignores clicks, so a double click cannot send the request twice. The generator writes loading as a plain attribute so the pasted button shows the state straight away.

Question 5

Do the icon names work in a new Quasar project?

Accepted Answer

Yes. The suggested names, such as send, add and arrow_forward, are Material Icons. A project created with npm init quasar already lists material-icons in the extras array of quasar.config, so they render with no setup. In Nuxt, add material-icons to the extras fontIcons option of the Quasar module. To use another set, such as mdi-v7, add it to extras the same way and type the name with its prefix, for example mdi-send.

Quasar Button Generator

How to use the Quasar Button Generator

Frequently asked questions