Announcing Ionic 7.3

Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!

Let’s look at what’s new 👇

HTML Attributes on Buttons in Alert, Action Sheet, and Toast

Overlay components such as Alerts, Action Sheets, and Toasts allow developers to pass custom buttons to the components. However, there was no way to set custom attributes on those buttons. This meant that if developers wanted to set an icon-only button on Toast, then they were unable to describe the button using an “aria-label”. This new release of Ionic allows developers to set custom attributes on the overlay buttons using the new htmlAttributes property on the button interface.

const toast = await toastController.create({
  message: 'This is a toast',
  buttons: [
    { text: 'Confirm' },
    {
      role: 'cancel', 
      icon: 'close', 
      htmlAttributes: {
        'aria-label': 'Close Toast'
      }
    }
  ]
});

Alert Text Wrapping

In previous versions of Ionic, Alerts with long lines of text had their text truncated with ellipses. This resulted in accessibility issues since the full text could not be read. In Ionic 7.3, we updated the Alert component to wrap text to the next line instead of truncating so the full text can be read.

Toast Cancel Button Customization

Toast buttons can be styled using the button Shadow Part. However, there was no way to style just the cancel button. Ionic 7.3 adds a new button cancel Shadow Part so developers can target only the cancel button in their stylesheets.

/* The cancel button will have orange text, and all other buttons will have purple text */
ion-toast::part(button) {
  color: purple;
}

ion-toast::part(button cancel) {
  color: orange;
}

Thanks to @luisbytes for contributing this feature!

Thanks to everyone who made this release possible. We’re immensely grateful for the community’s continued contributions to improving Ionic. We’ll see you soon for the next release!