quasar/dist/api/QBtnToggle.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "type": "component",
  "meta": {
    "docsUrl": "https://v1.quasar.dev/vue-components/button-toggle"
  },
  "behavior": {
    "$listeners": {
      "desc": "All native events are being propagated (you don't need the '.native' modifier)"
    }
  },
  "props": {
    "ripple": {
      "type": [
        "Boolean",
        "Object"
      ],
      "desc": "Configure material ripple (disable it by setting it to 'false' or supply a config object)",
      "default": true,
      "examples": [
        false,
        "{ center: true, color: 'teal', keyCodes: [] }"
      ],
      "category": "style"
    },
    "value": {
      "type": "Any",
      "desc": "Model of the component; Either use this property (along with a listener for 'input' event) OR use v-model directive",
      "examples": [
        "v-model=\"selected\""
      ],
      "category": "model"
    },
    "options": {
      "type": "Array",
      "desc": "Array of Objects defining each option",
      "required": true,
      "definition": {
        "label": {
          "type": "String",
          "desc": "Label of option button; Use this prop and/or 'icon', but at least one is required",
          "examples": [
            "Option 1"
          ]
        },
        "icon": {
          "type": "String",
          "desc": "Icon of option button; Use this prop and/or 'label', but at least one is required",
          "examples": [
            "map",
            "ion-add",
            "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg",
            "img:statics/path/to/some_image.png"
          ],
          "category": "content"
        },
        "value": {
          "type": "Any",
          "desc": "Value of the option that will be used by component model",
          "required": true
        },
        "slot": {
          "type": "String",
          "desc": "Slot name to use for this button content; Useful for customizing content or even add tooltips",
          "examples": [
            "mySlot"
          ]
        },
        "...props": {
          "type": "Any",
          "desc": "Any other QBtn props"
        }
      },
      "examples": [
        "[ {label: 'One', value: 'one'}, {label: 'Two', value: 'two'} ]"
      ],
      "category": "model"
    },
    "color": {
      "type": "String",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "text-color": {
      "type": "String",
      "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "toggle-color": {
      "type": "String",
      "desc": "Color name for component from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style",
      "default": "primary"
    },
    "toggle-text-color": {
      "type": "String",
      "desc": "Overrides text color (if needed); Color name from the Quasar Color Palette",
      "examples": [
        "primary",
        "teal-10"
      ],
      "category": "style"
    },
    "spread": {
      "type": "Boolean",
      "desc": "Spread horizontally to all available space",
      "category": "content"
    },
    "outline": {
      "type": "Boolean",
      "desc": "Use 'outline' design",
      "category": "style"
    },
    "flat": {
      "type": "Boolean",
      "desc": "Use 'flat' design",
      "category": "style"
    },
    "unelevated": {
      "type": "Boolean",
      "desc": "Remove shadow",
      "category": "style"
    },
    "rounded": {
      "type": "Boolean",
      "desc": "Applies a more prominent border-radius for a squared shape button",
      "category": "style"
    },
    "push": {
      "type": "Boolean",
      "desc": "Use 'push' design",
      "category": "style"
    },
    "glossy": {
      "type": "Boolean",
      "desc": "Applies a glossy effect",
      "category": "style"
    },
    "size": {
      "type": "String",
      "desc": "Button size name or a CSS unit including unit name",
      "examples": [
        "xs",
        "sm",
        "md",
        "lg",
        "xl",
        "25px",
        "2rem"
      ],
      "category": "style"
    },
    "no-caps": {
      "type": "Boolean",
      "desc": "Avoid turning label text into caps (which happens by default)",
      "category": "content"
    },
    "no-wrap": {
      "type": "Boolean",
      "desc": "Avoid label text wrapping",
      "category": "content"
    },
    "dense": {
      "type": "Boolean",
      "desc": "Dense mode; occupies less space",
      "category": "style"
    },
    "readonly": {
      "type": "Boolean",
      "desc": "Put component in readonly mode",
      "category": "state"
    },
    "disable": {
      "type": "Boolean",
      "desc": "Put component in disabled mode",
      "category": "state"
    },
    "stack": {
      "type": "Boolean",
      "desc": "Stack icon and label vertically instead of on same line (like it is by default)",
      "category": "content"
    },
    "stretch": {
      "type": "Boolean",
      "desc": "When used on flexbox parent, button will stretch to parent's height",
      "category": "content"
    },
    "clearable": {
      "type": "Boolean",
      "desc": "Clears model on click of the already selected button",
      "category": "model",
      "addedIn": "v1.4.4"
    }
  },
  "events": {
    "input": {
      "desc": "Emitted when the component needs to change the model; Is also used by v-model",
      "params": {
        "value": {
          "type": "Any",
          "desc": "New model value",
          "required": true
        }
      }
    },
    "clear": {
      "desc": "When using the 'clearable' property, this event is emitted when the already selected button is clicked",
      "addedIn": "v1.4.4"
    }
  }
}