@ionic/core/dist/html.html-data.json

Base components for Ionic

{
  "version": 1.1,
  "tags": [
    {
      "name": "ion-accordion",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "disabled",
          "description": "If `true`, the accordion cannot be interacted with."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "readonly",
          "description": "If `true`, the accordion cannot be interacted with,\nbut does not alter the opacity."
        },
        {
          "name": "toggle-icon",
          "description": "The toggle icon to use. This icon will be\nrotated when the accordion is expanded\nor collapsed."
        },
        {
          "name": "toggle-icon-slot",
          "description": "The slot inside of `ion-item` to\nplace the toggle icon. Defaults to `\"end\"`.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "value",
          "description": "The value of the accordion. Defaults to an autogenerated\nvalue."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/accordion/accordion.tsx"
        }
      ]
    },
    {
      "name": "ion-accordion-group",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, all accordions inside of the\naccordion group will animate when expanding\nor collapsing."
        },
        {
          "name": "disabled",
          "description": "If `true`, the accordion group cannot be interacted with."
        },
        {
          "name": "expand",
          "description": "Describes the expansion behavior for each accordion.\nPossible values are `\"compact\"` and `\"inset\"`.\nDefaults to `\"compact\"`.",
          "values": [
            {
              "name": "compact"
            },
            {
              "name": "inset"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "multiple",
          "description": "If `true`, the accordion group can have multiple\naccordion components expanded at the same time."
        },
        {
          "name": "readonly",
          "description": "If `true`, the accordion group cannot be interacted with,\nbut does not alter the opacity."
        },
        {
          "name": "value",
          "description": "The value of the accordion group. This controls which\naccordions are expanded.\nThis should be an array of strings only when `multiple=\"true\"`"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/accordion-group/accordion-group.tsx"
        }
      ]
    },
    {
      "name": "ion-action-sheet",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the action sheet will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the action sheet will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "header",
          "description": "Title for the action sheet."
        },
        {
          "name": "is-open",
          "description": "If `true`, the action sheet will open. If `false`, the action sheet will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the actionSheetController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe action sheet dismisses. You will need to do that in your code."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "sub-header",
          "description": "Subtitle for the action sheet."
        },
        {
          "name": "translucent",
          "description": "If `true`, the action sheet will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
        },
        {
          "name": "trigger",
          "description": "An ID corresponding to the trigger element that\ncauses the action sheet to open when clicked."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/action-sheet/action-sheet.tsx"
        }
      ]
    },
    {
      "name": "ion-alert",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "animated",
          "description": "If `true`, the alert will animate."
        },
        {
          "name": "backdrop-dismiss",
          "description": "If `true`, the alert will be dismissed when the backdrop is clicked."
        },
        {
          "name": "css-class",
          "description": "Additional classes to apply for custom CSS. If multiple classes are\nprovided they should be separated by spaces."
        },
        {
          "name": "header",
          "description": "The main title in the heading of the alert."
        },
        {
          "name": "is-open",
          "description": "If `true`, the alert will open. If `false`, the alert will close.\nUse this if you need finer grained control over presentation, otherwise\njust use the alertController or the `trigger` property.\nNote: `isOpen` will not automatically be set back to `false` when\nthe alert dismisses. You will need to do that in your code."
        },
        {
          "name": "keyboard-close",
          "description": "If `true`, the keyboard will be automatically dismissed when the overlay is presented."
        },
        {
          "name": "message",
          "description": "The main message to be displayed in the alert.\n`message` can accept either plaintext or HTML as a string.\nTo display characters normally reserved for HTML, they\nmust be escaped. For example `<Ionic>` would become\n`&lt;Ionic&gt;`\n\nFor more information: [Security Documentation](https://ionicframework.com/docs/faq/security)\n\nThis property accepts custom HTML as a string.\nContent is parsed as plaintext by default.\n`innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config\nbefore custom HTML can be used."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "sub-header",
          "description": "The subtitle in the heading of the alert. Displayed under the title."
        },
        {
          "name": "translucent",
          "description": "If `true`, the alert will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
        },
        {
          "name": "trigger",
          "description": "An ID corresponding to the trigger element that\ncauses the alert to open when clicked."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/alert/alert.tsx"
        }
      ]
    },
    {
      "name": "ion-app",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/app/app.tsx"
        }
      ]
    },
    {
      "name": "ion-avatar",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/avatar/avatar.tsx"
        }
      ]
    },
    {
      "name": "ion-back-button",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "default-href",
          "description": "The url to navigate back to by default when there is no history."
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the button."
        },
        {
          "name": "icon",
          "description": "The built-in named SVG icon name or the exact `src` of an SVG file\nto use for the back button."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "text",
          "description": "The text to display in the back button."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/back-button/back-button.tsx"
        }
      ]
    },
    {
      "name": "ion-backdrop",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "stop-propagation",
          "description": "If `true`, the backdrop will stop propagation on tap."
        },
        {
          "name": "tappable",
          "description": "If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event."
        },
        {
          "name": "visible",
          "description": "If `true`, the backdrop will be visible."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/backdrop/backdrop.tsx"
        }
      ]
    },
    {
      "name": "ion-badge",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/badge/badge.tsx"
        }
      ]
    },
    {
      "name": "ion-breadcrumb",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "active",
          "description": "If `true`, the breadcrumb will take on a different look to show that\nit is the currently active breadcrumb. Defaults to `true` for the\nlast breadcrumb if it is not set on any."
        },
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the breadcrumb."
        },
        {
          "name": "download",
          "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "separator",
          "description": "If true, show a separator between this breadcrumb and the next.\nDefaults to `true` for all breadcrumbs except the last."
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/breadcrumb/breadcrumb.tsx"
        }
      ]
    },
    {
      "name": "ion-breadcrumbs",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "items-after-collapse",
          "description": "The number of breadcrumbs to show after the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed."
        },
        {
          "name": "items-before-collapse",
          "description": "The number of breadcrumbs to show before the collapsed indicator.\nIf `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,\nthe breadcrumbs will not be collapsed."
        },
        {
          "name": "max-items",
          "description": "The maximum number of breadcrumbs to show before collapsing."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/breadcrumbs/breadcrumbs.tsx"
        }
      ]
    },
    {
      "name": "ion-button",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "button-type",
          "description": "The type of button."
        },
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the button."
        },
        {
          "name": "download",
          "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
        },
        {
          "name": "expand",
          "description": "Set to `\"block\"` for a full-width button or to `\"full\"` for a full-width button\nwith square corners and no left or right borders.",
          "values": [
            {
              "name": "block"
            },
            {
              "name": "full"
            }
          ]
        },
        {
          "name": "fill",
          "description": "Set to `\"clear\"` for a transparent button that resembles a flat button, to `\"outline\"`\nfor a transparent button with a border, or to `\"solid\"` for a button with a filled background.\nThe default fill is `\"solid\"` except inside of a toolbar, where the default is `\"clear\"`.",
          "values": [
            {
              "name": "clear"
            },
            {
              "name": "default"
            },
            {
              "name": "outline"
            },
            {
              "name": "solid"
            }
          ]
        },
        {
          "name": "form",
          "description": "The HTML form element or form element id. Used to submit a form when the button is not a child of the form."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "shape",
          "description": "Set to `\"round\"` for a button with more rounded corners.",
          "values": [
            {
              "name": "round"
            }
          ]
        },
        {
          "name": "size",
          "description": "Set to `\"small\"` for a button with less height and padding, to `\"default\"`\nfor a button with the default height and padding, or to `\"large\"` for a button\nwith more height and padding. By default the size is unset, unless the button\nis inside of an item, where the size is `\"small\"` by default. Set the size to\n`\"default\"` inside of an item to make it a standard size button.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "large"
            },
            {
              "name": "small"
            }
          ]
        },
        {
          "name": "strong",
          "description": "If `true`, activates a button with a heavier font weight."
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/button/button.tsx"
        }
      ]
    },
    {
      "name": "ion-buttons",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "collapse",
          "description": "If true, buttons will disappear when its\nparent toolbar has fully collapsed if the toolbar\nis not the first toolbar. If the toolbar is the\nfirst toolbar, the buttons will be hidden and will\nonly be shown once all toolbars have fully collapsed.\n\nOnly applies in `ios` mode with `collapse` set to\n`true` on `ion-header`.\n\nTypically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)"
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/buttons/buttons.tsx"
        }
      ]
    },
    {
      "name": "ion-card",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "button",
          "description": "If `true`, a button tag will be rendered and the card will be tappable."
        },
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the card."
        },
        {
          "name": "download",
          "description": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
        },
        {
          "name": "href",
          "description": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "rel",
          "description": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
        },
        {
          "name": "router-direction",
          "description": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`.",
          "values": [
            {
              "name": "back"
            },
            {
              "name": "forward"
            },
            {
              "name": "root"
            }
          ]
        },
        {
          "name": "target",
          "description": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
        },
        {
          "name": "type",
          "description": "The type of the button. Only used when an `onclick` or `button` property is present.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card/card.tsx"
        }
      ]
    },
    {
      "name": "ion-card-content",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-content/card-content.tsx"
        }
      ]
    },
    {
      "name": "ion-card-header",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "translucent",
          "description": "If `true`, the card header will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-header/card-header.tsx"
        }
      ]
    },
    {
      "name": "ion-card-subtitle",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-subtitle/card-subtitle.tsx"
        }
      ]
    },
    {
      "name": "ion-card-title",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/card-title/card-title.tsx"
        }
      ]
    },
    {
      "name": "ion-checkbox",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "alignment",
          "description": "How to control the alignment of the checkbox and label on the cross axis.\n`\"start\"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.\n`\"center\"`: The label and control will appear at the center of the cross axis in both LTR and RTL.\nSetting this property will change the checkbox `display` to `block`.",
          "values": [
            {
              "name": "center"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "checked",
          "description": "If `true`, the checkbox is selected."
        },
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the checkbox."
        },
        {
          "name": "error-text",
          "description": "Text that is placed under the checkbox label and displayed when an error is detected."
        },
        {
          "name": "helper-text",
          "description": "Text that is placed under the checkbox label and displayed when no error is detected."
        },
        {
          "name": "indeterminate",
          "description": "If `true`, the checkbox will visually appear as indeterminate."
        },
        {
          "name": "justify",
          "description": "How to pack the label and checkbox within a line.\n`\"start\"`: The label and checkbox will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and checkbox will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and checkbox will appear on opposite\nends of the line with space between the two elements.\nSetting this property will change the checkbox `display` to `block`.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "space-between"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "label-placement",
          "description": "Where to place the label relative to the checkbox.\n`\"start\"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.\n`\"fixed\"`: The label has the same behavior as `\"start\"` except it also has a fixed width. Long text will be truncated with ellipses (\"...\").\n`\"stacked\"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.",
          "values": [
            {
              "name": "end"
            },
            {
              "name": "fixed"
            },
            {
              "name": "stacked"
            },
            {
              "name": "start"
            }
          ]
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "name",
          "description": "The name of the control, which is submitted with the form data."
        },
        {
          "name": "required",
          "description": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
        },
        {
          "name": "value",
          "description": "The value of the checkbox does not mean if it's checked or not, use the `checked`\nproperty for that.\n\nThe value of a checkbox is analogous to the value of an `<input type=\"checkbox\">`,\nit's only used when the checkbox participates in a native `<form>`."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/checkbox/checkbox.tsx"
        }
      ]
    },
    {
      "name": "ion-chip",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "disabled",
          "description": "If `true`, the user cannot interact with the chip."
        },
        {
          "name": "mode",
          "description": "The mode determines which platform styles to use.",
          "values": [
            {
              "name": "ios"
            },
            {
              "name": "md"
            }
          ]
        },
        {
          "name": "outline",
          "description": "Display an outline style button."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/chip/chip.tsx"
        }
      ]
    },
    {
      "name": "ion-col",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "offset",
          "description": "The amount to offset the column, in terms of how many columns it should shift to the end\nof the total available."
        },
        {
          "name": "offset-lg",
          "description": "The amount to offset the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "offset-md",
          "description": "The amount to offset the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "offset-sm",
          "description": "The amount to offset the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "offset-xl",
          "description": "The amount to offset the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "offset-xs",
          "description": "The amount to offset the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "pull",
          "description": "The amount to pull the column, in terms of how many columns it should shift to the start of\nthe total available."
        },
        {
          "name": "pull-lg",
          "description": "The amount to pull the column for lg screens, in terms of how many columns it should shift\nto the start of the total available."
        },
        {
          "name": "pull-md",
          "description": "The amount to pull the column for md screens, in terms of how many columns it should shift\nto the start of the total available."
        },
        {
          "name": "pull-sm",
          "description": "The amount to pull the column for sm screens, in terms of how many columns it should shift\nto the start of the total available."
        },
        {
          "name": "pull-xl",
          "description": "The amount to pull the column for xl screens, in terms of how many columns it should shift\nto the start of the total available."
        },
        {
          "name": "pull-xs",
          "description": "The amount to pull the column for xs screens, in terms of how many columns it should shift\nto the start of the total available."
        },
        {
          "name": "push",
          "description": "The amount to push the column, in terms of how many columns it should shift to the end\nof the total available."
        },
        {
          "name": "push-lg",
          "description": "The amount to push the column for lg screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "push-md",
          "description": "The amount to push the column for md screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "push-sm",
          "description": "The amount to push the column for sm screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "push-xl",
          "description": "The amount to push the column for xl screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "push-xs",
          "description": "The amount to push the column for xs screens, in terms of how many columns it should shift\nto the end of the total available."
        },
        {
          "name": "size",
          "description": "The size of the column, in terms of how many columns it should take up out of the total\navailable. If `\"auto\"` is passed, the column will be the size of its content."
        },
        {
          "name": "size-lg",
          "description": "The size of the column for lg screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
        },
        {
          "name": "size-md",
          "description": "The size of the column for md screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
        },
        {
          "name": "size-sm",
          "description": "The size of the column for sm screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
        },
        {
          "name": "size-xl",
          "description": "The size of the column for xl screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
        },
        {
          "name": "size-xs",
          "description": "The size of the column for xs screens, in terms of how many columns it should take up out\nof the total available. If `\"auto\"` is passed, the column will be the size of its content."
        }
      ],
      "references": [
        {
          "name": "Source code",
          "url": "https:/github.com/ionic-team/ionic-framework/tree/main/core/src/components/col/col.tsx"
        }
      ]
    },
    {
      "name": "ion-content",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "color",
          "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics).",
          "values": [
            {
              "name": "danger"
            },
            {
              "name": "dark"
            },
            {
              "name": "light"
            },
            {
              "name": "medium"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "success"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "fixed-slot-placement",
          "description": "Controls where the fixed content is placed relative to the main content\nin the DOM. This can be used to control the order in which fixed elements\nreceive keyboard focus.\nFor example, if