{"id":5563,"date":"2023-08-28T11:59:10","date_gmt":"2023-08-28T15:59:10","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=5563"},"modified":"2023-08-28T11:59:12","modified_gmt":"2023-08-28T15:59:12","slug":"announcing-ionic-7-3","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3","title":{"rendered":"Announcing Ionic 7.3"},"content":{"rendered":"\n<p>Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!<\/p>\n\n\n\n<p>Let\u2019s look at what\u2019s new \ud83d\udc47<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>HTML Attributes on Buttons in Alert, Action Sheet, and Toast<\/strong><\/p>\n\n\n\n<p>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 &#8220;aria-label&#8221;. This new release of Ionic allows developers to set custom attributes on the overlay buttons using the new <code>htmlAttributes<\/code> property on the button interface.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">const toast = await toastController.create({\n\u00a0\u00a0message: &#039;This is a toast&#039;,\n\u00a0\u00a0buttons: [\n\u00a0\u00a0\u00a0\u00a0{ text: &#039;Confirm&#039; },\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0role: &#039;cancel&#039;,\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0icon: &#039;close&#039;,\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0htmlAttributes: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#039;aria-label&#039;: &#039;Close Toast&#039;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0]\n});<\/code><\/pre>\n\n\n\n<p><strong>Alert Text Wrapping<\/strong><\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><strong>Toast Cancel Button Customization<\/strong><\/p>\n\n\n\n<p>Toast buttons can be styled using the <code>button<\/code> Shadow Part. However, there was no way to style just the cancel button. Ionic 7.3 adds a new <code>button cancel<\/code> Shadow Part so developers can target only the cancel button in their stylesheets.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">\/* The cancel button will have orange text, and all other buttons will have purple text *\/\nion-toast::part(button) {\n\u00a0\u00a0color: purple;\n}\n\nion-toast::part(button cancel) {\n\u00a0\u00a0color: orange;\n}<\/code><\/pre>\n\n\n\n<p>Thanks to <a href=\"https:\/\/github.com\/luisbytes\">@luisbytes<\/a> for contributing this feature!<\/p>\n\n\n\n<p>Thanks to everyone who made this release possible. We\u2019re immensely grateful for the community\u2019s continued contributions to improving Ionic. We\u2019ll see you soon for the next release!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!<\/p>\n","protected":false},"author":72,"featured_media":5567,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,120],"tags":[23,3],"class_list":["post-5563","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-all","category-announcements","tag-framework","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Announcing Ionic 7.3 - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionic 7.3\" \/>\n<meta property=\"og:description\" content=\"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-28T15:59:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-28T15:59:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Liam DeBeasi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@LiamDeBeasi\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Liam DeBeasi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\"},\"author\":{\"name\":\"Liam DeBeasi\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\"},\"headline\":\"Announcing Ionic 7.3\",\"datePublished\":\"2023-08-28T15:59:10+00:00\",\"dateModified\":\"2023-08-28T15:59:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\"},\"wordCount\":249,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png\",\"keywords\":[\"Framework\",\"Ionic\"],\"articleSection\":[\"All\",\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\",\"name\":\"Announcing Ionic 7.3 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png\",\"datePublished\":\"2023-08-28T15:59:10+00:00\",\"dateModified\":\"2023-08-28T15:59:12+00:00\",\"description\":\"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png\",\"width\":2240,\"height\":1120,\"caption\":\"ionic 7.3\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionic 7.3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa\",\"name\":\"Liam DeBeasi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg\",\"caption\":\"Liam DeBeasi\"},\"sameAs\":[\"https:\/\/x.com\/LiamDeBeasi\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/liam\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionic 7.3 - Ionic Blog","description":"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionic 7.3","og_description":"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!","og_url":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3","og_site_name":"Ionic Blog","article_published_time":"2023-08-28T15:59:10+00:00","article_modified_time":"2023-08-28T15:59:12+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","type":"image\/png"}],"author":"Liam DeBeasi","twitter_card":"summary_large_image","twitter_creator":"@LiamDeBeasi","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Liam DeBeasi","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3"},"author":{"name":"Liam DeBeasi","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa"},"headline":"Announcing Ionic 7.3","datePublished":"2023-08-28T15:59:10+00:00","dateModified":"2023-08-28T15:59:12+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3"},"wordCount":249,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","keywords":["Framework","Ionic"],"articleSection":["All","Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionic-7-3#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3","url":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3","name":"Announcing Ionic 7.3 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","datePublished":"2023-08-28T15:59:10+00:00","dateModified":"2023-08-28T15:59:12+00:00","description":"Today we are pleased to announce the release of Ionic 7.3 with improvements to Alert, Action Sheet, and Toast!","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionic-7-3"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","width":2240,"height":1120,"caption":"ionic 7.3"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionic-7-3#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionic 7.3"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d314e583cf08e7a28c51e8ffc3d621fa","name":"Liam DeBeasi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ZNK4lRAJ_400x400-150x150.jpg","caption":"Liam DeBeasi"},"sameAs":["https:\/\/x.com\/LiamDeBeasi"],"url":"https:\/\/ionic.io\/blog\/author\/liam"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/08\/ionic7.3-feature-image.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=5563"}],"version-history":[{"count":7,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5563\/revisions"}],"predecessor-version":[{"id":5574,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/5563\/revisions\/5574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/5567"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=5563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=5563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=5563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}