Button Toggle

The QBtnToggle component is another basic element for user input, similar to QRadio but with buttons. You can use this to supply a way for the user to pick an option from multiple choices.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QBtnToggle'
    ]
  }
}

Usage

Basic



TIP

Since QBtnToggle uses QBtn, you can use design related props of QBtn to style this component.

Some design examples



First QBtnToggle below has tooltips on each button. Second QBtnToggle has customized the content. Notice the slot prop in the options Object definition. When you use this slot prop, you don’t necessary need the label/icon props in options.

Custom buttons content



Spread horizontally



Disable and readonly



On a dark background



QBtnToggle API