quasar/src/components/badge/QBadge.json

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

{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/badge"
  },

  "props": {
    "color": {
      "extends": "color"
    },

    "text-color": {
      "extends": "text-color"
    },

    "floating": {
      "type": "Boolean",
      "desc": "Tell QBadge if it should float to the top right side of the relative positioned parent element or not",
      "category": "content"
    },

    "transparent": {
      "type": "Boolean",
      "desc": "Applies a 0.8 opacity; Useful especially for floating QBadge",
      "category": "style"
    },

    "multi-line": {
      "type": "Boolean",
      "desc": "Content can wrap to multiple lines",
      "category": "content"
    },

    "label": {
      "type": [ "String", "Number" ],
      "desc": "Badge's content as string; overrides default slot if specified",
      "examples": [ "John Doe", 22 ],
      "category": "content"
    },

    "align": {
      "type": "String",
      "desc": "Sets vertical-align CSS prop",
      "values": [ "top", "middle", "bottom" ],
      "category": "content"
    },

    "outline": {
      "type": "Boolean",
      "desc": "Use 'outline' design (colored text and borders only)",
      "category": "style"
    },

    "rounded": {
      "type": "Boolean",
      "desc": "Makes a rounded shaped badge",
      "category": "style"
    }
  },

  "slots": {
    "default": {
      "desc": "This is where QBadge content goes, if not using 'label' property"
    }
  }
}