-
-This section details the desktop browser, JavaScript framework, and mobile platform versions that are supported by Ionic 8.
-
-**Minimum Browser Versions**
-| Desktop Browser | Supported Versions |
-| --------------- | ----------------- |
-| Chrome | 89+ |
-| Safari | 15+ |
-| Firefox | 75+ |
-| Edge | 89+ |
-
-**Minimum JavaScript Framework Versions**
-| Framework | Supported Version |
-| --------- | --------------------- |
-| Angular | 16+ |
-| React | 17+ |
-| Vue | 3.0.6+ |
-
-**Minimum Mobile Platform Versions**
-| Platform | Supported Version |
-| -------- | ---------------------- |
-| iOS | 15+ |
-| Android | 5.1+ with Chromium 89+ |
-
-Ionic Framework v8 removes backwards support for CSS Animations in favor of the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API). All minimum browser versions listed above support the Web Animations API.
-
-
Dark Mode
-
-
-In previous versions, it was recommended to define the dark palette in the following way:
-
-```css
-@media (prefers-color-scheme: dark) {
- body {
- /* global app variables */
- }
-
- .ios body {
- /* global ios app variables */
- }
-
- .md body {
- /* global md app variables */
- }
-}
-```
-
-In Ionic Framework version 8, the dark palette is being distributed via css files that can be imported. Below is an example of importing a dark palette file in Angular:
-
-```css
-/* @import '@ionic/angular/css/palettes/dark.always.css'; */
-/* @import "@ionic/angular/css/palettes/dark.class.css"; */
-@import "@ionic/angular/css/palettes/dark.system.css";
-```
-
-By importing the `dark.system.css` file, the dark palette variables will be defined like the following:
-
-```css
-@media (prefers-color-scheme: dark) {
- :root {
- /* global app variables */
- }
-
- :root.ios {
- /* global ios app variables */
- }
-
- :root.md {
- /* global md app variables */
- }
-}
-```
+## Version 9.x
-Notice that the dark palette is now applied to the `:root` selector instead of the `body` selector. The [`:root`](https://developer.mozilla.org/en-US/docs/Web/CSS/:root) selector represents the `` element and is identical to the selector `html`, except that its specificity is higher.
+- [Components](#version-9x-components)
+ - [Button](#version-9x-button)
+ - [Card](#version-9x-card)
+ - [Chip](#version-9x-chip)
+ - [Datetime](#version-9x-datetime)
+ - [Grid](#version-9x-grid)
+ - [Input Otp](#version-9x-input-otp)
+ - [Radio Group](#version-9x-radio-group)
+ - [Textarea](#version-9x-textarea)
-While migrating to include the new dark palette files is unlikely to cause breaking changes, these new selectors can lead to unexpected overrides if custom CSS variables are being set on the `body` element. We recommend updating any instances where global application variables are set to target the `:root` selector instead.
+
Components
-For more information on the new dark palette files, refer to the [Dark Mode documentation](https://ionicframework.com/docs/theming/dark-mode).
+
Button
-
Global Styles
+- The `border-radius` of the `ios` and `md` button now defaults to `6px` and `999px` instead of `14px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"` for `md` and override the `--border-radius` CSS variable for `ios` to `14px`, or set it to a different value entirely.
-
Text Color
-
-The `core.css` file has been updated to set the text color on the `body` element:
-
-```diff
-body {
-+ color: var(--ion-text-color);
-}
-```
+
Card
-This allows components to inherit the color properly when used outside of Ionic Framework and is required for custom themes to work properly. However, it may have unintentional side effects in apps if the color was not expected to inherit.
+- **ion-card**: The `border-radius` of the `ios` and `md` card now defaults to `14px` and `12px` instead of `8px` and `4px`, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"soft"`, or override the `--border-radius` CSS variable to specify a different value.
-
Dynamic Font
+- **ion-card-content**: The `ion-card-content` component has been updated to Shadow DOM. With this update, all card-related components now use Shadow DOM for style encapsulation. The default styles for heading elements inside `ion-card-content` have been removed. If you need custom styling for headings, you can add your own CSS targeting these elements. For example:
-The `core.css` file has been updated to enable dynamic font scaling by default.
+ ```css
+ ion-card-content h1 {
+ margin-top: 0;
+ margin-bottom: 2px;
-The `--ion-default-dynamic-font` variable has been removed and replaced with `--ion-dynamic-font`.
-
-Developers who had previously chosen dynamic font scaling by activating it in their global stylesheets can revert to the default setting by removing their custom CSS. In doing so, their application will seamlessly continue utilizing dynamic font scaling as it did before. It's essential to note that altering the font-size of the html element should be avoided, as it may disrupt the proper functioning of dynamic font scaling.
-
-Developers who want to disable dynamic font scaling can set `--ion-dynamic-font: initial;` in their global stylesheets. However, this is not recommended because it may introduce accessibility challenges for users who depend on enlarged font sizes.
-
-For more information on the dynamic font, refer to the [Dynamic Font Scaling documentation](https://ionicframework.com/docs/layout/dynamic-font-scaling).
-
-
Haptics
-
-- Support for the Cordova Haptics plugin has been removed. Components that integrate with haptics, such as `ion-picker` and `ion-toggle`, will continue to function but will no longer play haptics in Cordova environments. Developers should migrate to Capacitor to continue to have haptics in these components.
+ font-size: 1.5rem;
+ }
-
+ font-size: 1rem;
+ }
-- Button text now wraps by default. If this behavior is not desired, add the `ion-text-nowrap` class from the [CSS Utilities](https://ionicframework.com/docs/layout/css-utilities).
+ ion-card-content h3,
+ ion-card-content h4,
+ ion-card-content h5,
+ ion-card-content h6 {
+ margin-top: 2px;
+ margin-bottom: 2px;
-
Checkbox
+ font-size: 0.875rem;
+ }
+ ```
- The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
+
Chip
-
Content
+- The `border-radius` of the `ios` and `md` chip now defaults to `10px` and `8px`, respectively, instead of `16px` in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the `shape` to `"round"`, or override the `--border-radius` CSS variable to specify a different value.
-- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
+
Datetime
-
Datetime
+- The `ion-buttons` component has been removed from the internal implementation of `ion-datetime` and is no longer required when passing custom buttons to the `slot="buttons"`. When providing custom buttons, use a `div` element instead of `ion-buttons`. While existing code using `ion-buttons` may continue to work visually, future updates to the `ion-buttons` component may cause any styles you rely on to break.
-- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
- - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
- ```diff
- ion-datetime::part(month-year-button) {
- - --background: red;
+
Grid
- + background: red;
- }
- ```
+- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
-
Input
+
Example 1: Swap two columns
-- `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
-- `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
+**Version up to 8.x**
-
Item
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
-- The `helper` slot has been removed. Developers should use the `helperText` property on `ion-input` and `ion-textarea`.
-- The `error` slot has been removed. Developers should use the `errorText` property on `ion-input` and `ion-textarea`.
-- Counter functionality has been removed including the `counter` and `counterFormatter` properties. Developers should use the properties of the same name on `ion-input` and `ion-textarea`.
-- The `fill` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
-- The `shape` property has been removed. Developers should use the property of the same name on `ion-input`, `ion-select`, and `ion-textarea`.
-- Item no longer automatically delegates focus to the first focusable element. While most developers should not need to make any changes to account for this update, usages of `ion-item` with interactive elements such as form controls (inputs, textareas, etc) should be evaluated to verify that interactions still work as expected.
+**Version 9.x+**
-
CSS variables
+```html
+
+
+ 1
+ 2
+ 3
+
+
+```
-The following deprecated CSS variables have been removed: `--highlight-height`, `--highlight-color-focused`, `--highlight-color-valid`, and `--highlight-color-invalid`. These variables were used on the bottom border highlight of an item when the form control inside of that item was focused. The form control syntax was [simplified in v7](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax) so that inputs, selects, and textareas would no longer be required to be used inside of an item.
+
Example 2: Reorder columns with specific sizes
-If you have not yet migrated to the modern form control syntax, migration guides for each of the form controls that added a highlight to item can be found below:
-- [Input migration documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax)
-- [Select migration documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
-- [Textarea migration documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
+To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:
-Once all form controls are using the modern syntax, the same variables can be used to customize them from the form control itself:
+**Version up to 8.x**
-| Name | Description |
-| ----------------------------| ----------------------------------------|
-| `--highlight-color-focused` | The color of the highlight when focused |
-| `--highlight-color-invalid` | The color of the highlight when invalid |
-| `--highlight-color-valid` | The color of the highlight when valid |
-| `--highlight-height` | The height of the highlight indicator |
+```html
+
+
+ 1
+ 2
+
+
+```
-The following styles for item:
+**Version 9.x+**
-```css
-ion-item {
- --highlight-color-focused: purple;
- --highlight-color-valid: blue;
- --highlight-color-invalid: orange;
- --highlight-height: 6px;
-}
+```html
+
+
+ 1
+ 2
+
+
```
-will instead be applied on the form controls:
-
-```css
-ion-input,
-ion-textarea,
-ion-select {
- --highlight-color-focused: purple;
- --highlight-color-valid: blue;
- --highlight-color-invalid: orange;
- --highlight-height: 6px;
-}
+
Example 3: Push
+
+```html
+
+
+
+
ion-col push 1
+
+
+
ion-col push 1
+
+
+
```
-> [!NOTE]
-> The input and textarea components are scoped, which means they will automatically scope their CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` or `ion-textarea` for customization will not work; therefore we recommend adding a class and customizing it that way.
-
-
Modal
-
-- Detection for Capacitor <= 2 with applying status bar styles has been removed. Developers should ensure they are using Capacitor 3 or later when using the card modal presentation.
-
-
Nav
-
-- `getLength` returns `Promise` instead of ``. This method was not previously available in Nav's TypeScript interface, but developers could still access it by casting Nav as `any`. Developers should ensure they `await` their `getLength` call before accessing the returned value.
-
-
Picker
-
-- `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
- - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
- - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
-
-
Progress bar
-
-- The `--buffer-background` CSS variable has been removed. Use `--background` instead.
-
-
Toast
-
-- `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.
-
-For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
-
-
Radio
-
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
-
-
Range
-
-- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. Ionic will also no longer attempt to automatically associate form controls with sibling `