ion-alert: Ionic Aler4�Buttons with Custom Message Prompts

�doctype html> ion-alert: Ionic Aler4�Buttons with Custom Message Prompts

!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return ne7�URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{cons4�a=ne7�URLSearchParams(window.location.search).entries();for(var[t,e]of a)if(t.startsWith("docusaurus-data-")){var n=t.replace("docusaurus-data+"+"+"+"+"data+"+"+");document.documentElement.setAttribute(n,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())�_script><di6�id="__docusaurus"><div role="region" aria-label="Ski0�to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Ski0�to main content</a></div><di6�class="announcementbar_mb4j" role="banner"><di6�class="content_kng5 5 5 announcementBarContent_xLdY"><a href="https:�]www.outsystems.com/?utm_source=ionic&utm_medium=referral&utm_campaign=ionic-referral&utm_term=none&utm_content=other&utm_campaignteam=digital-mktg&utm_partner=none" target="_blank" rel="noopener"><span>An <strong>OutSystems</strong> Company →�_span></a></div></div><di6�id="__docusaurus_skiptocontent_fallback" class="main-wrapper mainWrapper_CIJY"><di6�class="docswrapper_hbab"><button aria-label="Scroll back to top" class="clean-btn theme-back-ta-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><a target="_self" href="/doctz"><img src="/doctzlogotzionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height=(� N)�8" width="�0�09"><img src= Ydocs/logos/ionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="28" width="139">�_a><div class="sidebar_njMd sidebarWithHideableNavbar_wUlq"><a tabindex="-1" class="sidebarLogo_isFc" target="_self" href="/doctz"><img src="/doctzlogotzionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height=(� N)�8" width="�0�09"><img src= Ydocs/logos/ionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="28" width="139">�_a><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIk?�?�menuWithAnnouncementBar_GW3s"><ul class="theme-doc-sidebar-men5�menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzcomponents">Getting Started</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzcomponents">UI Components</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vaccordion">Accordion�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/accordion">ion-accordion</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/accordion-group">ion-accordion-group</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vaction-sheet">Action Sheet�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/action-sheet">ion-action-sheet</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-care4�menu__link--active" role="button" aria-expanded="true" href= Ydocs/api/alert">Alert</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="."."." href= Ydocs/api/alert">ion-alert</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vbadge">Badge�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/badge">ion-badge</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vbreadcrumb">Breadcrumbs</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vbreadcrumb">ion-breadcrumb�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vbreadcrumbs">ion-breadcrumbs�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/button">Button</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vbutton">ion-button�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vripple-effect">ion-ripple-effect�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/card">Card</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcard">ion-card�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcard-content">ion-card-content�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcard-header">ion-card-header�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcard-subtitle">ion-card-subtitle�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcard-title">ion-card-title�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/checkbox">Checkbox</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcheckbox">ion-checkbox�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/chip">Chip</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vchip">ion-chip�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/app">Content</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vapp">ion-app�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcontent">ion-content�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/datetime">Date &amp<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�Time Pickers�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/datetime">ion-datetime</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/datetime-button">ion-datetime-button</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/picker">ion-picker</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/picker-column">ion-picker-column</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/picker-column-option">ion-picker-column-option</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/picker-legacy">ion-picker-legacy</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vfab">Floating Action Button</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vfab">ion-fab�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vfab-button">ion-fab-button�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vfab-list">ion-fab-list�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/grid">Grid</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vgrid">ion-grid�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vcol">ion-col�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vrow">ion-row�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/icon">Icons�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/icon">ion-icon</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vinfinite-scroll">Infinite Scroll�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/infinite-scroll">ion-infinite-scroll</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/infinite-scroll-content">ion-infinite-scroll-content</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vinput">Inputs</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vinput">ion-input�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vinput-password-toggle">ion-input-password-toggle�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vinput-otp">ion-input-otp�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vtextarea">ion-textarea�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/item">Item</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem">ion-item�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem-divider">ion-item-divider�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem-group">ion-item-group�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem-sliding">ion-item-sliding�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem-options">ion-item-options�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vitem-option">ion-item-option�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vlabel">ion-label�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vnote">ion-note�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/list">List</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vlist">ion-list�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vlist-header">ion-list-header�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/avatar">Media�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/avatar">ion-avatar</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/icon">ion-icon</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/img">ion-img</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/thumbnail">ion-thumbnail</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vmenu">Menu�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/menu">ion-menu</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/menu-button">ion-menu-button</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/menu-toggle">ion-menu-toggle</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/split-pane">ion-split-pane</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vmodal">Modal�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/modal">ion-modal</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/backdrop">ion-backdrop</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vnav">Navigation</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vnav">ion-nav�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vnav-link">ion-nav-link�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/popover">Popover</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vpopover">ion-popover�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/loading">Progress Indicators</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vloading">ion-loading�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vprogress-bar">ion-progress-bar�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vskeleton-text">ion-skeleton-text�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vspinner">ion-spinner�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/radio">Radio</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vradio">ion-radio�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vradia-group">ion-radio-group�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/range">Range</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vrange">ion-range�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/refresher">Refresher</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vrefresher">ion-refresher�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vrefresher-content">ion-refresher-content�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/reorder">Reorder</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vreorder">ion-reorder�_a>�_li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/doctzap}vreorder-group">ion-reorder-group�_a>�_li></ul>�_li><li class="theme-doc-sidebar-item-categor9�theme-doc-sidebar-item-category-level-1 menu__list-item"><di6�class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href= Ydocs/api/router">Routing�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/router">ion-router</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/router-link">ion-router-link</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/router-outlet">ion-router-outlet</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/route">ion-route</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/route-redirect">ion-route-redirect</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vsearchbar">Searchbar�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/searchbar">ion-searchbar</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vsegment">Segment�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/segment">ion-segment</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/segment-button">ion-segment-button</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/segment-content">ion-segment-content</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/segment-view">ion-segment-view</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vselect">Select�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/select">ion-select</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/select-option">ion-select-option</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vtabs">Tabs�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/tabs">ion-tabs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/tab">ion-tab</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/tab-bar">ion-tab-bar</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/tab-button">ion-tab-button</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vtoast">Toast�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/toast">ion-toast</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vtoggle">Toggle�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/toggle">ion-toggle</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vtoolbar">Toolbar�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/toolbar">ion-toolbar</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/header">ion-header</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/footer">ion-footer</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/title">ion-title</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/buttons">ion-buttons</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/back-button">ion-back-button</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzap}vtext">Typography�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api/text">ion-text</a></li>�_ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublis4�menu__link--sublist-caret" role="button" aria-expanded="true" href="/doctzapi">Resources�_a>�_div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level(�(g)� menu__list-item"><a class="menu__link" tabindex="."."." href= Ydocs/api">AP!�?�Index</a></li>�_ul></li>�_ul></nav></div></div></aside><div><nav aria-label="Main" class="navbar navbar--fixed-top navbarHideable_�mJ"><div class="navbar__inner"><di6�class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0�0�0�0�0�00 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="1."."." stroke-width=(� N)�" d="M2 2 2 7h(� g)�M4 15h(� g)�M4(��N)�3h(� g)�">�_path></svg></button><a class="navbar__brand" target="_self" href="/doctz"><div class="navbar__logo"><img src="/doctzlogotzionic-text-docs-dark.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--light_NVdE" height=(� N)�8" width="�0�09"><img src= Ydocs/logos/ionic-text-docs-light.svg" alt="Site Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU" height="28" width="139">�_div>�_a><a class="navbar__item navbar__link" href= Ydocs.".">Guide�_a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/doctzcomponents">Components�_a><a class="navbar__item navbar__link" href= Ydocs/cli">CLI</a><a class="navbar__item navbar__link" href="/doctznative">Native�_a><a class="navbar__item navbar__link cta" href= Ydocs/updatin�u8-.".".">Ionic v8.0.0 Upgrade Guide</a></div><di6�class="navbar__items navbar__items--right"><di6�class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href= Ydocs/api/alert">v8�_a><ul class="dropdown__menu"><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/doctzap}valert">v8</a></li><li><a class="dropdown__link" href="/doctzv7/api/alert">v7�_a>�_li><li><a href="https:�]ionic-docs-fo03f34h5-ionic1.vercel.app/doctzv6" target="_self" rel="noopener noreferrer" class="dropdown__link">v6�_a>�_li><li><a href="https:�]ionic-docs-5utg8ms4c-ionic1.vercel.app/doctzv5" target="_self" rel="noopener noreferrer" class="dropdown__link">v5�_a>�_li><li><a href="https:�]ionicframework.com/doctzv4/components" target="_blank" rel="noopener noreferrer" class="dropdown__link">v4�_a>�_li><li><a href="https:�]ionicframework.com/doctzp�c�."." target="_blank" rel="noopener noreferrer" class="dropdown__link">p�c��_a>�_li></ul>�_div><div class="navbarSearchContainer_Bcs"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search (Command+K)"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0(��N)�0 20" aria-hidden="true"><path d="4.385 5 14�0�0�0�0�086l4.0875 5 5 4.0877-4.0877-4.0877c-2.9418(��N)�.99-7.15(��N)�.99-10.6�0�0�02 2 0-2.9419(�(g)�.98-2.9419-7.7�5 0-10.6�0�0�02 2 2.9418(�(g)�.99 7.15(�(g)�.99 10.6�0�0�02 2 0 2.9419(��N)�.98 2.9419 7.7�5 0 10.6�0�0�03z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>�_svg><span class="DocSearch-Button-Placeholder">Search</span>�_span><span class="DocSearch-Button-Keys"></span>�_button></div><di6�class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link navbar__link--community">Community</a><ul class="dropdown__menu"><li><a href="httpsa_/ionicframework.co�wcommunity" target="_blank" class="dropdown__link">Communit9�Hub<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li><li><a href="https:�]forum.ionicframework.com."." target="_blank" class="dropdown__link">Forum<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li><li><a href="https:�]www.meetup.com/topictzionic-framewor�v" target="_blank" class="dropdown__link">Meetups<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/blog.ionicframework.com."." target="_blank" class="dropdown__link">Blog<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/twitter.com/ionicframework" target="_blank" class="dropdown__link">Twitter<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li></ul>�_div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link navbar__link--support">Support�_a><ul class="dropdown__menu"><li><a href="https:�]ionicframework.com/support" target="_blank" class="dropdown__link">Hel0�Center<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/ionic.zendesk.com."." target="_blank" class="dropdown__link">Customer Support<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li><li><a href="httpsa_/ionicframework.co�wadvisory" target="_blank" class="dropdown__link">Enterprise Advisory<svg width="(�*h)�" height="(�*h)�" aria-hidden="true" viewBox="0 0 24(��N)�4" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 �0�0'0h(�(g)�1v-19h(�*h)��h-10'5h17v-8h2z2�1��p-12h-10.988l4.�0�05 4-6.975 5 5 7.07(��N)�.828(��N)�.828 6.977-7.05 5 5 4.(�*h)�5 4.172v-11z">�_path></svg></a></li>�_ul></div><di6�class="navbar__item"><di6�class="separator" aria-hidden>�_div>�_div><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link icon-link language navbar__item"><svg xmlns="http:�]www.d�m�.org(�W)�00�]svg" viewBox="0 0 �2 �2" width="(� g)�" height="(� g)�" aria-hidden="true" class="iconLanguage_nlXk"><path fill="currentColor" d="M478�0�0�0�0�02 2 �0�0�0�0�03.6l-90-8a(� g)�(��N)�2 0 00-40.67 0l-DS(��N)�182 (� g)� 0 1040.67 16.79�0�0�0�016.65 5 406h102.67�8.�0�0�0�0 44.39(�O)�2 (� g)� 0 00458 4642 (� g)� 0 0(��e)�0.(�>y)��0�0�0�00.4z�0�0�0�034.82 2 362L368 281.65 401.15 5 5 362zM267.82 2 2 342.(��N)�2 (� g)� 0 00-4.89�0�0�0�00.7c-.2-.15-15-11.�0�0�0�0�0�06.49�0�0�0�04.�0�0�0�0�0�0�09.65-53.68 62.�-114.75 (�ё)�7-143.49�0�0�0�0302 (� g)� 0 000-44H4V702 (� g)� 0 00-44 0��0H542 (� g)� 0 000 44h197.25c-9.(�yr)�(��N)�6.95(�(g)�7.05 69.5-�0�0�0.79 108.36�0�0�0�01.-41.68-43.08-68.65-43.17-68.872 (� g)� 0 00-40.58 17c.58 1�0�0�0�0�08 14.55 34(�ё)�2 2 (�yr)�.85 5 �0�0�0.93.(��N)� 1.19 1.�0�0�0(��N)��0�0�0�0�05 2.74�0�0�0�0�0.51-39(�ё)�2 2 2 44�0�0�0�0�05-77.72 2 2 .86-�0�0�0.85 AS.74a(� g)�(��N)�2 0 10.05 5 5 38.63c2.16-1.18 48.6(�(g)�6.89 101.63-85.59 (� g)�.52 24.08 38�0�0�0�0�05.44�0�0�0�0�08.�0�0�0�0�0�0�0�06.1a(� g)�(��N)�2 0 0030.75-4.9z">�_path></svg><span class="localeVisuallyHidden_pF54">English�_span></a><ul class="dropdown__menu"><li><a href= Ydocs/api/alert" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English�_a>�_li><li><a href="/doctzja/api/alert" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="ja">日本語</a></li><li><a href="httpsa_/ionicframework.co�wtranslate" target="_blank" class="dropdown__link">Translate<svg width="12" height="12" aria-hidden="true" viewBox="0 0(��N)�2 2 2 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M 13v10h-v-19�2v2h-10v15�7v-8zm3-(�*h)�h-10.988l4.035 4-6.977 7.05 5 5 2.(��R)�8 2.(��R)�8 6.977-7.07 4.125 4.1(�]y)�v-�z"></path>�_svg>�_a>�_li></ul>�_div><a href="httpsa_/twitter.com/Ionicframework" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-twitter" aria-label="Twitter"></a><a href="https:�]ionic.link/discord" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-discord" aria-label="Discord">�_a><a href="httpsa_/github.co�wionic-team/ionic-framework" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link icon-link icon-link-mask icon-link-github" aria-label="GitHub repository"></a><di6�class="toggle_vylo colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and ligh4�mode (currentl9�ligh4�mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite" aria-pressed="false"><svg viewBox="0 0 24(��N)�4" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="2,9c1.65,0�0�0�0,1�0�0�0�0�05,3,3s-1�0�0�0�0�05,3-3,3s�0�0�0�0-1�0�0�0�0�05-3-3S10�0�0�0�0�05,9,(�*h)�,9 M(�*h)�,7c-2.76,0-5(�4l)�(�ё)�4-5,5s2.24,5,5,5s5(�(g)�(�ё)�4,5-5 e4.76,7,12,7L(�*h)�,7+�M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l(�(g)�,0c-0.55,0-1,0.45-1,1S1.45,13,2,�0�0+�M20,�0�0,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l(�(g)�,0c-0.55,0-1,0.45-1,1S19.45,�0�0(�4l)�0,�0�0+�1,2v2c0,0.55,0.45,1,1,1s1-0.45,1-12�6�c0-0.55-0.45-1-1-1e1,1.45,11,2z M�(�4l)�0v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C�.45,19,11,19.45,�(�4l)�0z M5.99,4.58c-0�0�0�0�0�09-0.39-1.03-0.39-1.41,0 c-0.39,0�0�0�0�0�09-0.39,1.03,0,1.�.06,1.06c0�0�0�0�0�09,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.L5.99,4.58+�8.36,16.95 c-0�0�0�0�0�09-0.39-1.03-0.39-1.41,0c-0�0�0�0�0�09,0.39-0�0�0�0�0�09,1.�0�0,0,1.41l1.06,1.06c0.39,0�0�0�0�0�09,1.�0�0,0�0�0�0�0�09,1.,0c0�0�0�0�0�09-0.39,0�0�0�0�0�09-1.�0�0,0-1.41 8.36,16.95+�9.(� T)�,5.99c0.39-0�0�0�0�0�09,0.39-1.03,0-1.c-0.39-0�0�0�0�0�09-1.�0�0-0�0�0�0�0�09-1.,0l-1.06,1.06c-0�0�0�0�0�09,0.39-0�0�0�0�0�09,1.�0�0,0,1.41 .03,0.39,1.41,0L19.42,5.99+�M7.05,18�0�0�0�0�06c0.39-0�0�0�0�0�09,0.39-1.03,0-1.c-0.39-0�0�0�0�0�09-1.�0�0-0�0�0�0�0�09-1.,0l-1.06,1.05 5 c-0.39,0�0�0�0�0�09-0.39,1.03,0,1. .03,0.39,1.41,0L7.05,18.36z"></path>�_svg><svg viewBox="0 0 24(��N)�4" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.(��R)�,9.1,7.5c0,4.08,3.(�>y)�,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0(�ё)�7C17.45,17.19,14.93,19,12,19 c�0�0�0�0.86,0-7-3.14-7-7C5,9.07,6.,6.55,9.37,5.51z M(�*h)��0�0�0c-4.97,0-9,4.03-9,9s4.�0�0,9,9,9s9-4.03,9-9c0-0.46-0.04-0.(��N)�-0.1-1�0�0�0�0�05 5 c-0.98,1�0�0�0�0�07-2.58(�4l)�(�ё)�6-4.4,2.26c-2.98,0-5.4(�(g)�.42-5.4-5.4c0-1.,0.89-3.(� T)�(�4l)�(�ё)�6-4.4C(�*h)�.92,3.04,12.46�0�0�0,12,3L(�*h)��0�0�0z"></path>�_svg>�_button></div></div></div><di6�role="presentation" class="navbar-sidebar__backdrop"></div></nav><main class="docMainContainer_TBSr"><di6�class="container padding-top--md padding-bottom--lg"><di6�class="row"><div class="col docItemCol_VOVn"><di6�class="docitemcontainer_djhp"><article><span class="theme-doc-version-badge badge badge--secondary">Version: v8</span><div class="tocCollapsible_ETC7�theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button>�_div><div class="theme-doc-markdown markdown"><header><�>ion-alert�_�></header>  <a class="encapsulation-pill encapsulationPill_weMM" href= Ydocs/reference/glossary#scoped">scoped�_a> <p>An Alert is a dialog tha4�presents users with information or collects information from the user using inputs. An alert appears on to0�of the app&#t�7;s content, and mus4�be manuall9�dismissed by the user before the9�can resume interaction with the app. I4�can also optionall9�have a <code>header</code>, <code>subHeader</code> and <code>message�_code>.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="inline-alerts-recommended">Inline Alerts (Recommended)<a href="#inline-alerts-recommended" class="hash-link" aria-label="Direc4�link to Inline Alerts (Recommended)" title="Direct link to Inline Alerts (Recommended)"></a></h2> <p><code>ion-alert</code> can be used b9�writing the componen4�directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert.</p> �-- --> <di6�class="playground"><di6�class="playground__container"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__code-block"></div></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="using-isopen">Using <code>isOpen</code><a href="#using-isopen" class="hash-link" aria-label="Direct link to using-isopen" title="Direct link to using-isopen">�_a>�_1�6��p> <p>The <code>isOpen</code> propert9�on <code>ion-alert�_code �allows developers to control the presentation state of the Alert from their application state. This means when <code>isOpen</code> is se4�to <code>true</code> the Alert will be presented, and when <code>isOpen</code> is se4�to <code>false�_code �the Aler4�will be dismissed.�_p> <p><code>isOpen�_code �uses a one-way data binding, meaning i4�will not automatically be se4�to <code>false�_code �when the Alert is dismissed. Developers should listen for the <code>ionAlertDidDismiss�_code �or <code>didDismiss</code> event and set <code>isOpen</code> to <code>false</code>. The reason for this is i4�prevents the internals of <code>ion-alert</code> from being tightl9�coupled with the state of the application. With a one wa9�data binding, the Aler4�only needs to concern itself with the boolean value that the reactive variable provides. With a two wa9�data binding, the Aler4�needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.</p> �-- --> <di6�class="playground"><di6�class="playground__container"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__code-block"></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="controller-alerts">Controller Alerts<a href="#controller-alerts" class="hash-link" aria-label="Direct link to Controller Alerts" title="Direc4�link to Controller Alerts">�_a>�_> <p>The <code>alertController�_code �can be used in situations where more control is needed over when the Alert is presented and dismissed.�_p>  <div class="playground"><div class="playground__container"><di6�class="playground__control-toolbar"><div class="playground__control-group"><button title="Show Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular�_button><button title="Show JavaScrip4�code" class="playground__control-button" data-text="JavaScript">JavaScript�_button><button title="Show React code" class="playground__control-button" data-text="React">React</button><button title="Sho7�Vue code" class="playground__control-button" data-text="Vue">Vue�_button></div><di6�class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS�_button><button title="MD mode" class="playground__control-button" data-text="MD">MD</button>�_div><div class="playground__control-grou0�playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http:�]www.d�m�.org(�W)�00�]svg"><path d="M5.538(�*h)� 5.917�0�0�0�0�0L7.52915 1 8.01835H4.42601L2.42601 13L9 5.743H5.�0�0�02Z" stroke="#73849A" stroke-linejoin="round"></path>�_svg>�_button><button class="playground__icon-button playground__icon-button--primary playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="httpa_/www.w3.or�u2000/svg" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M2.06667 9V9.47756 9 1 8.5(� g)�44 1 7.9�0�0�0�0�0�0�0�0�0�0�0�0�0 1.895�0�0�0�0�0 1.895�0�0�0�0�0 1�0�0�0�0�0 1H7.9�0�0�0�0�0�0�0�0C8.5(� g)�44 1 9 1.47756 9(��N)�.066672�6�.06667" stroke="current"></path><rec4�x=�0�0�0" y=�0�0�0" width="8" height="8" rx="1.5" stroke="current"></rect>�_svg>�_button><button class="playground__icon-button"><svg aria-hidden="true" width="10" height="(�*h)�" viewBox="0 0 10 (�*h)�" fill="none" xmlns="http:�]www.d�m�.org(�W)�00�]svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2(�ё)�(� g)�15(��N)�.9(��)�47�0�0�0�0.0442 2 2 2.(� T)�(��e)�5 4.01109 2.�0�0082 2 2 5 2.�0�0084C5.�0�0�0�0�0�0�0�08 2.�0�0082 2 2 6.08145 5 2.15202 6.39(�>y)�1 2.18�5C6.68142 2.77 6.948(��N)�(�ё)�65 7.08584(��N)��0�0�0�0�0�0�0�0�0�0(��N)�C7.17445(��N)�.41686 7�0�0�0�0�01584(��N)�.52988 7�0�0�0�0�0(�yr)�(��N)�.73039C7�0�0�0�0�08869(��N)�.9�� 7(�ё)�94(��e)��0�0�0�0�0.07964 7(�ё)�55�0�0�0�0�0.14415C7.18678�0�0�0�0�0(�ё)��49 7.126�0�0�0�0�0(�ё)�5445 7.09468�0�0�0�0�0(�ё)�75C7.076(�>y)��0�0�0�0�0(�ё)�8704 7.0001�0�0�0�0�0(�ё)�9656 7.04754�0�0�0�0�0�0�0�0�0�0�0�045C7.02 3.30695 5 7.�0�0555 5 5 3.30995 7.�0�0082 3.�24C7.029�0�0�0�0�0�0�0�0�0�0�0�0�0�0�0�017 7.027(��N)��0�0�0�0�0�0�0�0�0�0�0�089 7.0265 5 3.�456C7.(��e)�58�0�0�0�0�0�0�0�0�0�01496 7.025�0�0�0�0�0�0�0�0�0�0�0�01535 7.02429�0�0�0�0�0�0�0�0�0�015(�]y)�C7.0�0�0�0�0�0��0�0�0�0�0�0�0�0�0�016 7.0(� g)�38�0�0�0�0�0�0�0�0�0�01667 7.05 3.�L7.020�0�0�0�0�0�0�0�0�0�0�0�0�0�0�017�0�0C7.01994�0�0�0�0�0�0�0�0�0�01787 7.01905�0�0�0�0�0�0�0�0�0�018� 6.81818(��N)�.91589L7.01905�0�0�0�0�0�0�0�0�0�018�C6.7�0�0�085�0�0�0�0�0.42779 6.536�0�0�0�0�0�0�0�0�0�03637 6.410�0�0�0�0�0�0�0�0�0�0.114(�*h)�C6.406(��)��0�0�0�0�0.1065 6.40305 3.09881 6.39972 3.09108C6.36(��R)�9 3.08669 6.�0�0�0�0282 2 2 3.08(� g)�2 2 2 6.29298 3.07787C6.(��e)�849 3.04892 5.�972 2 2 3.(��e)�AS2 2 2 5 3.(��e)�AS4C4.1909�0�0�0�0�0.02804�0�0�0�0�0�0�0�0�0�09996�0�0�0�0�0(�ё)�64(��R)�(��N)�.727�0�0�0�0�0.70846(��)�.05447 4.1(�yr)�09 1.530�0�0 4.7(��R)�64 1(�ё)�2049 5.52038C0.910862 2 2 6.252 0.(��R)�985 7.0699 0.987699 7.85307C1.14555 8.�0�0�0�0�0(��)�5 1.�0�0�0�5 5 5 9.35562 2 2 2.10(�]y)�9 9.(��N)�(��e)�8C2.67942 10.4849 3.40�0�0�05 10.8692 2 2 4.2019 11.(��e)�(�yr)�C4.99546 11.181 5.AS1 �.1011 6.56552 10.7955C7.�302 2 2 10.4899 7.95195 9.97241 8.40145 5 5 9.30847C8.85098 8.64452 9.09091 7.86392 2 2 9.09091 7.06542C9.09091 6.765 5 5 9.29442 6.�682 9.54545 6.�682C9.79649 6.�682 10 6.81767 10 7.06542C10 8.039 9.70675 8.99544 9.15735 9.806(��N)�C8.60794 10.�84 7.82705 11.2509 6.9�0�0(� T)� 11.(��)�44C5.99979 11.9979 4.99445 12.0956 4.02455 11.DS(�yr)��0�0�0�0.05464 11.48(��N)�.1�0�0�0�0�0�0�0 11.2448 1.46447 10.5547C0.765205 5 9.86458 0.28DS(��e)� 8.985(�>y)� 0.0960758 8.028�C-0.0968502 7.07089 0.006639 6.078 0�0�0�0�0�0AS05 5.17704C0.75DS�0�0�0�0�0 4(�ё)�7536 1�0�0�0�0�0999 3.50469 2.(� g)�5 2.96247Z" fill="#73849A"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.�0�0�0�0C4.8561 -0.0�0�0�0�0�079 5.1�0�0�0�0�09 -0.0�0�0�0�0�079 5�0�0�0�0�0 0.1�391L7.592 2 2 2.37�0�0�0�0�08C7.77165 2.54955 5 5 7.77165 2.�0�0�0361 7.592 2 2 3.00879L5.(�>y)�141 5.25178C5.1439 5.42697 4.8561 5.(� T)�695 5 5 4.67859 5.25178C4.50108 5.0766 4.50108 4.7(��N)�56 4.67859 4.61737L6.6299 2.69159L4.67859 0.765805C4.50108 0.5DS�5 5 4.50108 0.30658 4.67859 0.�0�0�0�0Z" fill="#�0�0849A">�_path></svg></button><a class="playground__icon-button" href="httpsa_/github.co�wionic-team/ionic-doctzissues/new/choose" aria-label="Repor4�an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M5 5 0C2.68661 0 0 2.75(��)�5 0 6.15268C0 8.87142 2 1.962 2 2 �.175 4.1�0�057 11.98�0�0�0C4.107 11.99�0�0 4.1�0�0 12 4.20�0�0�05 5 (�*h)�C4.42768 12 4.��0�0�0�09 �.8365 5 4.��0�0�0�09 �.6946C4.��0�0�0�09 �.5472 2 4.50AS2 2 2 �.1�5 5 4.50�0�0�05 5 10.6473C4.28�0�05 5 10.6982 4.07945 5 10.7195 5 3.9 10.7196C2.74552 2 2 10.7195 5 2.48302 2 2 9.(��R)��0�0�0�0�02 2.48302 2 2 9.(��R)��0�0�0�0�02C2.20982 9.�25 1.81607 8.9(� g)�(�>y)� 1.81607 8.9(� g)�(�>y)�(�ё)��0�0�075 8.55536 1.8�0�039 8.54464 1.8�0�0�057 8.54464.85625(��)�.458�0�0�0 8.598(��N)�.775 9.1(��R)�14(��N)�.775 9.1(��R)�14�0�0�0�0.075 9.70714�0�0�0�0�0.47679 9.85446�0�0�0�0�0.835 9.85446C4.11696 9.85446 4�0�0�0�0�0�0�0�0�0�0 9.7�0�0�0�0�039 4.5�0�0�0�0�0 9.6�0�0�075C4.575 9(�ё)�97(�>y)� 4.73036 9.02679 4.90179 8.8�0�0�0�0�0�0�0�0�0.57054 8.71607(��N)�.16964 8.18839(��N)�.16964 5.8�25(��)�.16964 5.158�0�0�0(��N)�.4(��e)�68 4.609(��R)�(��N)�.785 4.125(��)�.724� 4.02589(��N)�.51786�0�0�0�0�0�0�0�0�0�099�(��N)�.84464(��N)�.5(�yr)�68(��)�.84464(��N)�.5(�yr)�68(��N)�.8875 2.�0�0�0(��N)�9 2.97855 5 5 2.�0�0�0(��N)�9C3.19552 2 2 2.�0�0�0(��N)�9 3.68571 2.(��)��0�0�0�0�02 4.49462 2 2 3.18482C4.971 3.04(��R)�1 5.48571 2.98(�*h)�5 5.99�0�02 2.97857C6.50(��)�5 2.98(�*h)�5 7.(��e)�052 2 2 3.04(��R)�1 7.5 3.18482C8.30892 2 2.(��)��0�0�0�0�02 8.791 2.�0�0�0(��N)�9 9.0105 5 5 2.�0�0�0(��N)�9C9.102 2 2 2.�0�0�0(��N)�9 9.15(��N)�.5(�yr)�68 9.15 2.55268C9.47679 3.391 9.27052 2 2 4.(��e)�589 9.20892 2 4.18(�*h)�5C9.59195 5 4.�25 9.825 5.1�� 9.825 5.8�25C9.825 8.1�0�0�075 8.4�0�0�0�0�0 8.7�0�039 7.084(��R)� 8.86607C7(�ё)�99� 9.05625 7.496 9.4�25 7.496 10.0045C7.496 10.(��R)�68 7.4�0�0�0�0�0�0 11.49� 7.4�0�0�0�0�0�0 11.692C7.48392 2 �.8365 5 7.56695 5 (�*h)� 7.78929 12C7.(��R)�142 2 (�*h)� 7.858�0�0�0 11.99�0�0 7.896�0�0�0�0�0 11.98�0�0�00.282 2 �.175 12 8.86875 (�*h)� 6.1(�yr)�682 2.75(��)�5 9.��0�0�0�09 0 5 5 0Z" fill="#73849A"></path>�_svg>�_a>�_div>�_div>�_div><div class="playground__code-block">�_div>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="buttons">Buttons<a href="#buttons" class="hash-link" aria-label="Direc4�link to Buttons" title="Direct link to Buttons"></a></h2> <p>In the array of <code>buttons</code>, each button includes properties for its <code>text�_code>, and optionall9�a <code>handler</code>. If a handler returns <code>false�_code �then the alert will no4�automaticall9�be dismissed when the button is clicked. All buttons will show u0�in the order the9�have been added to the <code>buttons�_code �arra9�from lef4�to right. Note: The righ4�most button (the las4�one in the array) is the main button.</p> <p>Optionally, a <code>role</code> propert9�can be added to a button, such as <code>cancel�_code>. If a <code>cancel�_code �role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.�_p>  <div class="playground"><div class="playground__container playground__container--has-console"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__console"><div class="playground__console-header"><code>Console</code>�_div><div class="playground__console-body"><div class="playground__console-item playground__console-item--placeholder"><code>Console messages will appear here when logged from the example above.</code>�_div>�_div>�_div><div class="playground__code-block">�_div>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="inputs">Inputs<a href="#inputs" class="hash-link" aria-label="Direct link to Inputs" title="Direct link to Inputs">�_a>�_> <p>Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and tex4�inputs are all accepted, but the9�cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same aler4�cannot mix radio and checkbo8�inputs. Do note however, different types of "text" inputs can be mixed, such as <code>url</code>, <code>email</code>, <code>text�_code>, <code>textarea</code> etc. If you require a complex form UI which doesn&#t�7;4�fi4�within the guidelines of an aler4�then we recommend building the form within a modal instead.</p> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="text-inputs-example">Text Inputs Example<a href="#text-inputs-example" class="hash-link" aria-label="Direct link to Tex4�Inputs Example" title="Direc4�link to Text Inputs Example">�_a>�_1�6��p> �-- --> <di6�class="playground"><di6�class="playground__container"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__code-block"></div></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="radio-example">Radio Example<a href="#radio-example" class="hash-link" aria-label="Direct link to Radio Example" title="Direc4�link to Radio Example">�_a>�_1�6��p> �-- --> <di6�class="playground"><di6�class="playground__container"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__code-block"></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="customization">Customization<a href="#customization" class="hash-link" aria-label="Direct link to Customization" title="Direc4�link to Customization">�_a>�_> <p>Alert uses scoped encapsulation, which means it will automaticall9�scope its CSS by appending each of the styles with an additional class a4�runtime. Overriding scoped selectors in CSS requires a <a href="https:�]developer.mozilla.or�uen-Uldocs/Web/CSS/Specificity" target="_blank" rel="noopener noreferrer">higher specificity�_a> selector.�_p> <p>We recommend passing a custom class to <code>cssClass</code> in the <code>create�_code �method and using tha4�to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.�_p> <di6�class="language-css codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-css codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token comment">/* DOES NOT WORK - not specific enough */</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token selector class">.alert-wrapper</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token property">background</span><span class="token punctuation">:</span><span class="token plain"> </span><span class="token hexcode color">#e5e5e5</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token comment">/* Works - pass "my-custom-class&quot<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�in cssClass to increase specificit9�"\�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token selector class">.my-custom-class�_span><span class="token selector"> </span><span class="token selector class">.alert-wrapper</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token property">background</span><span class="token punctuation">:</span><span class="token plain"> </span><span class="token hexcode color">#e5e5e5</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <p>Any of the defined <a href="#css-custom-properties">CSS Custom Properties�_a> can be used to style the Aler4�withou4�needing to targe4�individual elements:�_p> <di6�class="language-css codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-css codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token selector class">.my-custom-class</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token variable">--background</span><span class="token punctuation">:</span><span class="token plain"> </span><span class="token hexcode color">#e5e5e5</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> �-- --> <di6�class="playground"><di6�class="playground__container"><div class="playground__control-toolbar"><di6�class="playground__control-group"><button title="Sho7�Angular code" class="playground__control-button playground__control-button--selected" data-text="Angular">Angular</button><button title="Sho7�JavaScript code" class="playground__control-button" data-text="JavaScript">JavaScript</button><button title="Sho7�Reac4�code" class="playground__control-button" data-text="React">React�_button><button title="Show Vue code" class="playground__control-button" data-text="Vue">Vue</button>�_div><div class="playground__control-group"><button title="iOS mode" class="playground__control-button playground__control-button--selected" data-text="iOS">iOS</button><button title="MD mode" class="playground__control-button" data-text="MD">MD�_button></div><di6�class="playground__control-group playground__control-group--end"><button class="playground__icon-button playground__icon-button--primary"><svg aria-hidden="true" width="1."."." height="14" viewBox="0 0 10 14" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path d="M5.�0�0�02 5.743L7.(�yr)�5 1L1 8.01�0�0�05H4.(� T)�01L2.(� T)�01 �0�0L9 5.917�0�0�0�0�0H5.538(�*h)�Z" stroke="#�0�0849A" stroke-linejoin="round">�_path></svg></button><button class="playground__icon-button playground__icon-button--primar9�playground__icon-button--disabled" aria-disabled="true"><svg aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg" width="(�*h)�" height="(�*h)�" viewBox="0 0 12 (�*h)�" fill="none"><path d="M2.06665 5 5 9V9C1.47755 5 9 1 8.(�yr)�242 2 2 1 7.�0�0�0�0�0�0�03V3C1 1.89542 2 1.89542 2 1 2 2 1H7.�0�0�0�0�0�0�03C8.(�yr)�242 2 2 1 9 1.47755 5 9 2.06667V2.06667" stroke="current">�_path><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="current">�_rect></svg></button><button class="playground__icon-button"><svg aria-hidden="true" width="1."."." height="12" viewBox="0 0 10 12" fill="none" xmlns="httpa_/www.w3.or�u2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.(� g)�5 2.96247C3.0444(��N)�.42025 4.0�09(��N)�.13084 5(��N)�.13084C5.63538(��N)�.13084 6.046(��N)�.1(�yr)�(��e)� 6�0�0�0�0�0�0�0�0(��N)�.18615C6.6(� T)�(��N)�(�ё)�175 5 5 6.(��N)�148 2.26571 7.08582 2 2 2.36392C7.17445 2.685 5 7.�582 2 2 2.(�yr)�988 7.35(� g)�1 2.�0�0�0�09C7.38869 2.�0�0�0151 7.29402 3.07962 2 2 7.24155 3.145C7.18678 3.149 7.(�*h)�5 5 3.25445 7.09468 3.275C7.07�0�0�0�0�02 3.28702 2 2 7.06001 3.29655 5 7.04752 2 2 3.30345C7.04(�*h)��0�0�0�0�0�0�0�0�0�00696 7.03557�0�0�0�0�0�0�0�0�0�00995 7.030(��R)��0�0�0�0�0�0�0�0�0�0(�*h)�4C7.(��e)��0�0�02 2 3.��5 5 5 7.(��e)�792 3.�389 7.(��e)�66�0�0�0�0�0�0�0�0�0�01456C7.0258 3.�495 5 7.(��e)�502 2 3.��0�0�05 7.(��e)�(� T)�9 3.�572C7.(��e)��0�0�0�01 3.�(��)�1 7.(��e)��0�0�0�0�08 3.�665 5 5 7.(��e)�15�0�0�0�0�0�0�0�0�0�0171L7.(��e)�(��e)�2 2 3.�773C7.01992 2 2 3.�785 5 5 7.01DS5 3.��0�0�01 6.8 2.589L7.01DS5 3.��0�0�01C6.79385 3.(� T)�779 6.(�yr)��0�05 5 3.�0�0�0�0�0�0�0�0�05 5 5 6.042 2 3.�2C6.40662 3.1065 6.4�0�005�0�0�0�0�0.098 6�0�0�0�0�099(�]y)��0�0�0�0�0.008C6�0�0�0�0�06829�0�0�0�0�0.08669 6�0�0�0�0�0(�>y)�84�0�0�0�0�0.0(��R)�24 6(�ё)�(��N)�98�0�0�0�0�0.07787C6.02849�0�0�0�0�0.048(��N)� 5.61974�0�0�0�0�0.02804 5�0�0�0�0�0.02804C4.1DS9 3.(��e)�AS2 2 2 3.39995 5 3.26482 2.(�]y)�(�]y)�1 3.70846C2.05445 5 5 4.15209 1.�0�0�0012 2 4.78262 2 2 1.(� g)�049 5.(�yr)��0�08C0.0864 6(�ё)�58(�*h)� 0.82985 7.0699 0.987699 7.8�0�0�007.14555 8.63625 1.53517 9�0�0�0�0�05564(��N)�.10729 9.92028(��)�.679(� T)� 10.4849�0�0�0�0�0.40835 10.8694 4(�ё)�019 �.0252C4.99545 5 �.1 5.81801 11.10� 6.565(�yr)� 10.7955C7�0�0�0�0�0�0�004 10.4899 7.9�95 9.9(�]y)� 8.40147 9�0�0�0�0�00847C8.85098 8.644(�yr)� 9.0DS 7.8�0�0�0�0�094 9.0DS 7.065(� T)�C9.0DS 6.81767 9(�ё)�94(� T)� 6.616(��R)� 9.54545 6.616(��R)�C9.79649 6.616(��R)� 10 6.765 5 5 10 7.065(� T)�0 8.04�0�09 9.70675 8.99542 2 2 9.15�0�05 9.AS692C8.0792 2 2 10.6182 2 2 7.(��R)�705 �(�ё)�509 6.342 �.6244C5.99979 �.9979 4.99445 (�*h)�.0955 5 4.(��e)�455 �.9052C3.05462 2 2 �.7148 2.16372 2 �(�ё)�448 1.46445 5 5 10.5547C0.76(�yr)�06 9.86458 0(�ё)�89002 8.98�0�0�02 0.090758 8.(��e)�1C-0.09685(��e)� 7.07089 0.0(��e)�16�0�0�0�0�09 6.07871 0.380605 5.17704C0.759042 2 4.27�0�0�05 5 1.3999�0�0�0�0�0.50469(��N)�(�ё)�(� g)�15(��N)�.9(��)�47Z" fill="#�0�0849A">�_path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67859 0.1�391C4.85� -0.0437971 5.1439 -0.0437971 5.(�>y)�141 0.�0�0�0�0L7.59414(��N)��0�0�0�0�07438C7.765(��N)�.54957 7.765(��N)�.8�0�0�0�0� 7.59414�0�0�0�0�0.00879L5�0�0�0�0�0 5(�ё)��78C5.1�0�0�0�0�09 5.(� T)�695 5 5 4.85� 5.42697 4.67859 5(�ё)��78C4.50108 5.0765 5 4.50108 4.79255 5 4.67859 4.��0�07L6.(��)�99(��N)�.659L4.67859 0.765AS5C4.50108 0.590616 4.50108 0�0�0�0�0�00658 4.67859 0.1�391Z" fill="#73849A"></path>�_svg>�_button><a class="playground__icon-button" href="https:�]github.com/ionic-tea�wionic-docs/issuetzne�|choose" aria-label="Report an issue" target="_blank" rel="noreferrer"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 (�*h)� 12" fill="none"><path d="M6 0(��)�.686� 0 0(��N)�.75625 0 6.1(�yr)�68C0 8.8�0�0�0�0�0 1.71964 11.175 4.10355 5 5 �.9893C4.14105 5 5 �.9972 2 4.17(�>y)�1 (�*h)� 4(�ё)�0536 12C4.(� T)�768 (�*h)� 4.5�0�039 11.�0�0�066 4.5�0�039 11.6946C4.5�0�039 11.54�0�0 4.50804 11.1616 4.50536 10.64�0�0C4(�ё)�AS36 10.69(��R)� 4.07946 10.96�0�0�0�0�0.9 10.96(��)�.74554 10.96(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��N)�.4�0�0�004 9.8(� g)�(�>y)�(��)�(�ё)�09(��R)� 9.1(�*h)�5 1.05 5 5 8.(��N)��0�0�0�0�02 1.05 5 5 8.(��N)��0�0�0�0�02C1.29375 8.55�0�0�05 5 1.�0�0�0�09 8.54462 2 2 1.85355 5 5 8.54464H1.85(��)�5C2.45892 2 8.59(��R)�1 2.775 9.182 2 2 2.775 9.184C3.075 9.702 2 2 3.47679 9.85445 5 3.�0�0�0571 9.85446C4.�695 5 9.85445 5 4.37142 2 9.76�0�0�0�09 4.(�yr)�142 2 9.69375C4.575 9.29�0�02 4.�0�0�0�05 5 9.(��e)�679 4.DS179 8.87143C3.57052 2 2 8.05 5 5 2.16962 2 2 8.18�0�0�09 2.16962 2 2 5.�0�0�0(�*h)�5C2.16962 2 2 5.15892 2 2.40268 4.0982 2.78571 4.18(�*h)�5C2.(�]y)�1 4.(��e)�589 2.�785 5 3.391 2.84462 2 2 2.55268C2.84462 2 2 2.55268 2.8875(��N)�.53929(��N)�.97857(��N)�.53929�0�0�0�0.19554(��N)�.53929�0�0�0�0�0.685(��N)�.6(� g)�(�>y)� 4.49464�0�0�0�0�0.184(��R)�C4.974��0�0�0�0�0.048 5.485(��N)�.925 5.997(�>y)�(��N)�.97857C6.50625(��N)�.925 7.02054�0�0�0�0�0.048 7.5�0�0�0�0�0.184(��R)�C8�0�0�0�0�008�0�0�0(��N)�.6(� g)�(�>y)� 8.799�(��N)�.53929 9.01607(��N)�.53929C9.10714(��N)�.53929 9.15 2.55268 9.15(��N)�.5(�yr)�68C9.47679�0�0�0�0�0�0�0�0�0�099� 9(�ё)�7054 4.02589 9(�ё)�08�0�0�0 4.125C9.596 4.6(�*h)�5 9.(��R)�5 5.16161 9.(��R)�5 5.�0�0�0(�*h)�5C9.(��R)�5 8.19375 8.(� T)�142 2 8.�0�0�0�09 7.08482 8.8607C7.291 9.05(��)�5 7.49195 5 9.�0�0�0�0�0(�*h)�5 7.49195 5 10.0045C7.49195 5 10.8268 7.48392 2 �.41 7.48392 2 �.6(��N)�C7.4�0�0�0�0�0�0 11.�0�0�066 7.56696 12 7.78(��N)�9 (�*h)�C7.8�0�0�0�0�0 12 7.85892 2 �.9972 2 7.89642 2 �.9893C10(�ё)��0�0�0 11.175 (�*h)� 8.86875 12 6.15268C(�*h)�(��N)�.75625 9�0�0�0�0�0�0�039 0 6 0Z" fill="#�0�0849A">�_path></svg></a></div></div></div><di6�class="playground__code-block"></div></div> <div class="theme-admonition theme-admonition-note admonition_xJh�P�a� alert alert--secondary"><di6�class="admonitionheading_gvgb"><span class="admonitionIcon_R1�4��p7"><svg viewBox="0 0 12 2 2 16"><path fill-rule="evenodd" d="M6.2 2 5.69a.942.942 0 0 1-(�ё)�8-.7c0-.28.09-.52.28-.7.19-.18.42-(�ё)�8.7-(�ё)�8.28 0 .(�yr)�.09.7.28.18.19(�ё)�8.(� T)�(�ё)�8.5 5 5 0 (�ё)�8-.09.(�yr)�-.28.7s 1 0 0 1-.7.3c-.28 0-.(�yr)�-.�-.7-�0�0�0�0�0zM8 7.99c-.02-(�ё)�5-.11-.48-�0�0�0�0�01-.69-(�ё)�-.19-.(� T)�-.3-.69-�0�0�0�0�01H6c-.27.02-.48.�0�0-.69�0�0�0�0�01-(�ё)�(�ё)�-.3.44-.�.69h1v3c.02.27.11.5.�.69.2.2.(� T)��0�0�0�0�01.69�0�0�0�0�01h1c(�ё)�5 5 5 0 .48-.11.69-.�(�ё)�-.19�0�0�0�0�0-.(� T)��0�0�0�0�01-.69H8V7.98v.01zM5 5 5 2.3c�0�0�0�0.12 2 2 0-5.5 5 5 2.54-5.7 5.68 0 3.14(��N)�.55 5 5.5 5 5 5.5 5 5 5.7s5.7-2.55 5.7-5.7c0�0�0�0�0.15-2.56-5.69-5.7-5.69v.01zM5 5 5 .98c3.86 0 7�0�0�0�0�0.12 2 2 5 5 5 7s�0�0�0�0.12 2 2 7-5 5 5 7-7-3.(�*h)�-7-7�0�0�0�0�0.14-5 5 5 7-7z">�_path></svg></span>note�_div><div class="admonitionContent_Bue"><p>If yo5�are building an Ionic Angular app, the styles need to be added to a global styleshee4�file.</p></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="accessibility">Accessibility<a href="#accessibility" class="hash-link" aria-label="Direct link to Accessibility" title="Direc4�link to Accessibility">�_a>�_> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="screen-readers">Screen Readers<a href="#screen-readers" class="hash-link" aria-label="Direc4�link to Screen Readers" title="Direc4�link to Screen Readers"></a></h3> <p>Alerts set aria properties in order to be <a href= Ydocs/reference/glossary#s1y">accessible�_a> to screen readers, bu4�these properties can be overridden if they aren't descriptive enough or don&#t�7;4�align with how the alert is being used in an app.</p> <h2 2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="role">Role<a href="#role" class="hash-link" aria-label="Direc4�link to Role" title="Direc4�link to Role"></a></h4> <p>Ionic automaticall9�sets the Alert&#t�7;s <code>role�_code �to either <a href="httpsa_/developer.mozilla.org/en-US/doctzWeuAccessibilitQARIA/Roles/alertdialog_role" target="_blank" rel="noopener noreferrer"><code>alertdialog�_code></a �if there are any inputs or buttons included, or <a href="httpsa_/developer.mozilla.org/en-US/doctzWeuAccessibilitQARIA/Roles/alert_role" target="_blank" rel="noopener noreferrer"><code>alert�_code></a �if there are none.�_p> <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="alert-description">Alert Description<a href="#alert-description" class="hash-link" aria-label="Direc4�link to Aler4�Description" title="Direct link to Alert Description"></a></h4> <p>If the <code>header</code> propert9�is defined for the Alert, the <code>aria-labelledby</code> attribute will be automatically set to the header&#t�7;s ID. The <code>subHeader</code> element will be used as a fallback if <code>header</code> is no4�defined. Similarly, the <code>aria-describedby�_code �attribute will be automaticall9�se4�to the ID of the <code>message�_code �elemen4�if tha4�property is defined.�_p> <p>It is strongly recommended tha4�your Alert have a <code>message</code>, as well as either a <code>header�_code �or <code>subHeader�_code>, in order to align with the ARIA spec. If yo5�choose not to include a <code>header�_code �or <code>subHeader�_code>, an alternative is to provide a descriptive <code>aria-label�_code �using the <code>htmlAttributes�_code �property.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="."."." aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Angular�_li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Javascript�_li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Vue�_li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const�_span><span class="token plain" �aler4��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow">await�_span><span class="token plain" ��_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">alertController</span><span class="token punctuation">.</span><span class="token method function property-access">create�_span><span class="token punctuation">(�_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">message�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'This is an aler4�with custom aria attributes.&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">htmlAttributes</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token string-propert9�property">&#t�7;aria-label&#t�7;�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'alert dialog'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div></div><di6�role="tabpanel" class="tabItem_Ymn6" hidden=""><di6�class="language-javascript codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-javascrip4�codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const</span><span class="token plain"> alert </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token keyword control-flow">await</span><span class="token plain"> </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token property-access">alertController�_span><span class="token punctuation">.�_span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">message</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;This is an alert with custom aria attributes.'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">htmlAttributes�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token string-property property">'aria-label'</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;aler4�dialog&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div>�_div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token function">useIonAlert</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">message</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;This is an alert with custom aria attributes.'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">htmlAttributes�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token string-property property">'aria-label'</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;aler4�dialog&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div>�_div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const�_span><span class="token plain" �aler4��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow">await�_span><span class="token plain" �alertController</span><span class="token punctuation">.</span><span class="token method function property-access">create�_span><span class="token punctuation">(�_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">message�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'This is an aler4�with custom aria attributes.&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">htmlAttributes</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token string-propert9�property">&#t�7;aria-label&#t�7;�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'alert dialog'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div></div></div></div> <p>All ARIA attributes can be manually overwritten b9�defining custom values in the <code>htmlAttributes�_code �property of the Alert.�_p> <h4 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="alert-buttons-description">Alert Buttons Description<a href="#alert-buttons-description" class="hash-link" aria-label="Direc4�link to Aler4�Buttons Description" title="Direct link to Alert Buttons Description"></a></h4> <p>Buttons containing tex4�will be read b9�a screen reader. If a description other than the existing text is desired, a label can be se4�on the button by passing <code>aria-label</code> to the <code>htmlAttributes�_code �property on the button.</p> <div class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="."."." aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">Angular�_li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Javascript�_li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">React</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">Vue�_li></ul><div class="margin-top--md"><div role="tabpanel" class="tabItem_Ymn6"><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const�_span><span class="token plain" �aler4��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow">await�_span><span class="token plain" ��_span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">alertController</span><span class="token punctuation">.</span><span class="token method function property-access">create�_span><span class="token punctuation">(�_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">header</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;Header&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">buttons�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">text�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Exit'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">htmlAttributes�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token string-property property">'aria-label'</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;close'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div></div><di6�role="tabpanel" class="tabItem_Ymn6" hidden=""><di6�class="language-javascript codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-javascrip4�codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const</span><span class="token plain"> alert </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token keyword control-flow">await</span><span class="token plain"> </span><span class="token keyword">this�_span><span class="token punctuation">.�_span><span class="token property-access">alertController�_span><span class="token punctuation">.�_span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">header�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Header'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">buttons</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">text</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;Exit&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">htmlAttributes</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token string-propert9�property">&#t�7;aria-label&#t�7;�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'close&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">]�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div>�_div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token function">useIonAlert</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">header�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Header'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">buttons</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">text</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;Exit&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">htmlAttributes</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token string-propert9�property">&#t�7;aria-label&#t�7;�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'close&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">}�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token punctuation">]�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><span class="token punctuation">)�_span><span class="token punctuation">;�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div>�_div><div role="tabpanel" class="tabItem_Ymn6" hidden=""><div class="language-javascrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">const�_span><span class="token plain" �aler4��_span><span class="token operator">=</span><span class="token plain"> </span><span class="token keyword control-flow">await�_span><span class="token plain" �alertController</span><span class="token punctuation">.</span><span class="token method function property-access">create�_span><span class="token punctuation">(�_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">header</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;Header&#t�7;�_span><span class="token punctuation">,�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> �_span><span class="token literal-property property">buttons�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">text�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'Exit'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token literal-propert9�property">htmlAttributes�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token string-property property">'aria-label'</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token string">&#t�7;close'</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div></div></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="interfaces">Interfaces<a href="#interfaces" class="hash-link" aria-label="Direc4�link to Interfaces" title="Direc4�link to Interfaces"></a></h2> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="alertbutton">AlertButton<a href="#alertbutton" class="hash-link" aria-label="Direc4�link to AlertButton" title="Direct link to AlertButton"></a></h3> <di6�class="language-typescript codeBlockContainer_Ckt0 theme-code-block"><di6�class="codeblockcontent_biex"><pre tabindex="0" class="prism-code language-typescrip4�codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">type�_span><span class="token plain" ��_span><span class="token class-name">AlertButtonOverlayHandler</span><span class="token plain"> </span><span class="token operator">=�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token keyword">void�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">key</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">any�_span><span class="token plain" ��_span><span class="token punctuation">}�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain" style="display:inline-block"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token keyword">interface�_span><span class="token plain" ��_span><span class="token class-name">AlertButton</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � text</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � role</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token string">'cancel'</span><span class="token plain"> </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token string">&#t�7;destructive'</span><span class="token plain"> </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � cssClass</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">[�_span><span class="token punctuation">]�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> id�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � htmlAttributes</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">{</span><span class="token plain"> </span><span class="token punctuation">[</span><span class="token plain">key</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">any�_span><span class="token plain" ��_span><span class="token punctuation">}�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> handler</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain">value</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">any�_span><span class="token punctuation">)�_span><span class="token plain" ��_span><span class="token operator">=></span><span class="token plain"> AlertButtonOverlayHandler </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token builtin">Promise�_span><span class="token operator"><�_span><span class="token plain">AlertButtonOverlayHandler�_span><span class="token operator">>�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="alertinput">AlertInput<a href="#alertinput" class="hash-link" aria-label="Direct link to AlertInput" title="Direct link to AlertInput">�_a>�_1�6��p> <div class="language-typescrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-typescript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">interface�_span><span class="token plain" ��_span><span class="token class-name">AlertInput�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> type�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" �TextFieldTypes </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token string">&#t�7;checkbox&#t�7;�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token string">'radio&#t�7;�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token string">'textarea'</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � name</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> placeholder</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> value</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � </span><span class="token doc-comment comment">/**</span><br>�_span><span class="token-line"><span class="token doc-comment comment"> * The label tex4�to display nex4�to the input, if the input type is `radio` or `checkbox`.</span><br>�_span><span class="token-line"><span class="token doc-comment comment"> */</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � label�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � checked�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> disabled�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> id�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � handler�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">(�_span><span class="token plain">input�_span><span class="token operator">:</span><span class="token plain"> AlertInput</span><span class="token punctuation">)</span><span class="token plain"> </span><span class="token operator">=>�_span><span class="token plain" ��_span><span class="token keyword">void</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � min�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token builtin">number</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � max�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator">|�_span><span class="token plain" ��_span><span class="token builtin">number</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � cssClass</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">[�_span><span class="token punctuation">]�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> attributes�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token plain">key�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">]�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � tabindex</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">number�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain">�_span><span class="token punctuation">}�_span><br></span>�_code></pre><di6�class="buttongroup__atx"><button type="button" aria-label="Cop9�code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24(��N)�4" class="copyButtonIcon_y97N"><path fill="currentColor" d="9,H8V79M19,5H8(�O)�(�4l)� 0 0,0 6,72�6�1A2,2 0 0,0 8,�0�0�0�0�09A2,2 0 0,0 (�4l)�1V7A2,2 0 0,0 19,56,1H4A2,2 0 0,0 2,3V17H4�0�0�0�0�06V1Z">�_path></svg><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19�0�0�0�0.5,13.5L4.,12.09L9,16.179.59,5.59L,7Z"></path>�_svg>�_span></button>�_div>�_div>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="alertoptions">AlertOptions<a href="#alertoptions" class="hash-link" aria-label="Direct link to AlertOptions" title="Direct link to AlertOptions">�_a>�_1�6��p> <div class="language-typescrip4�codeBlockContainer_Ckt0 theme-code-block"><div class="codeBlockContent_biex"><pre tabindex="."."." class="prism-code language-typescript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line"><span class="token keyword">interface�_span><span class="token plain" ��_span><span class="token class-name">AlertOptions�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> header�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � subHeader�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � message�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token plain"> </span><span class="token operator">|�_span><span class="token plain" �IonicSafeString</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � cssClass</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token plain" ��_span><span class="token operator">|</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">[�_span><span class="token punctuation">]�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> inputs�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" �AlertInput�_span><span class="token punctuation">[�_span><span class="token punctuation">]�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> buttons</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token punctuation">(</span><span class="token plain">AlertButton �_span><span class="token operator">|</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">)�_span><span class="token punctuation">[�_span><span class="token punctuation">]�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> backdropDismiss</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">boolean</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � translucent�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> animated�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> htmlAttributes�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token punctuation">{�_span><span class="token plain" ��_span><span class="token punctuation">[�_span><span class="token plain">key�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">string�_span><span class="token punctuation">]�_span><span class="token operator">:</span><span class="token plain"> </span><span class="token builtin">any</span><span class="token plain"> </span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � mode</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> Mode</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � keyboardClose�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">boolean�_span><span class="token punctuation">;�_span><span class="token plain"></span><br>�_span><span class="token-line"><span class="token plain"> id�_span><span class="token operator">?</span><span class="token operator">:�_span><span class="token plain" ��_span><span class="token builtin">string</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" style="display:inline-block">�_span><br></span><span class="token-line"><span class="token plain" � enterAnimation</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> AnimationBuilder</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain" � leaveAnimation</span><span class="token operator">?�_span><span class="token operator">:</span><span class="token plain"> AnimationBuilder</span><span class="token punctuation">;</span><span class="token plain">�_span><br></span><span class="token-line"><span class="token plain"></span><span class="token punctuation">}</span><br>�_span></code>�_pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0(��N)�2 2 2 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19(�4l)�1H8V7H199,5H8A2,2 0 0,0 6,7V(�O)�(�4l)� 0 0,0 8(�4l)�3H19(�O)�(�4l)� 0 0,0(��N)�1,V7(�O)�(�4l)� 0 0,0 19,5M16,1H4(�O)�(�4l)� 0 0,0(��N)��0�0�0h7H4V3H16hZ"></path>�_svg><svg viewBox="0 0 24(��N)�4" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M,7L9,19L3.5,�0�0.5L4.91,(�*h)�.09L9,16.17L19.59,5.59L21,7Z">�_path></svg></span>�_button></div></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="properties">Properties<a href="#properties" class="hash-link" aria-label="Direc4�link to Properties" title="Direc4�link to Properties"></a></h2> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="animated">animated<a href="#animated" class="hash-link" aria-label="Direct link to animated" title="Direct link to animated">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>If <code>true</code>, the aler4�will animate.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>animated�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>boolean�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>true�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="backdropdismiss">backdropDismiss<a href="#backdropdismiss" class="hash-link" aria-label="Direct link to backdropDismiss" title="Direc4�link to backdropDismiss">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>If <code>true</code>, the aler4�will be dismissed when the backdro0�is clicked.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>backdrop-dismiss�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>boolean�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>true�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="buttons">buttons<a href="#buttons" class="hash-link" aria-label="Direct link to buttons" title="Direc4�link to buttons">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>Arra9�of buttons to be added to the alert.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>undefined�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>(string ｜ AlertButton)[]</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>[]</code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="cssclass">cssClass<a href="#cssclass" class="hash-link" aria-label="Direct link to cssClass" title="Direct link to cssClass">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>Additional classes to appl9�for custom CSS. If multiple classes are provided the9�should be separated by spaces.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>css-class�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>string �t�string[] ｜ undefined�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>undefined</code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="enteranimation">enterAnimation<a href="#enteranimation" class="hash-link" aria-label="Direct link to enterAnimation" title="Direct link to enterAnimation">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>Animation to use when the aler4�is presented.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>undefined</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>((baseEl: any, opts?: any) => Animation) �t�undefined</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>undefined�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="header">header<a href="#header" class="hash-link" aria-label="Direc4�link to header" title="Direc4�link to header"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>The main title in the heading of the alert.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>header</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>string ｜ undefined�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>undefined</code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="htmlattributes">htmlAttributes<a href="#htmlattributes" class="hash-link" aria-label="Direct link to htmlAttributes" title="Direct link to htmlAttributes">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>Additional attributes to pass to the alert.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>undefined</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>undefined �t�"[key: string]: any<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�}</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>undefined�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="inputs">inputs<a href="#inputs" class="hash-link" aria-label="Direc4�link to inputs" title="Direc4�link to inputs"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>Array of inpu4�to sho7�in the alert.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>undefined</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>AlertInput[]�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>[]�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="isopen">isOpen<a href="#isopen" class="hash-link" aria-label="Direc4�link to isOpen" title="Direc4�link to isOpen"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>If <code>true�_code>, the alert will open. If <code>false�_code>, the alert will close. Use this if you need finer grained control over presentation, otherwise jus4�use the alertController or the <code>trigger�_code �property. Note: <code>isOpen�_code �will not automatically be se4�back to <code>false</code> when the aler4�dismisses. You will need to do tha4�in your code.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>is-open</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>boolean</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>false�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="keyboardclose">keyboardClose<a href="#keyboardclose" class="hash-link" aria-label="Direct link to keyboardClose" title="Direc4�link to keyboardClose">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>If <code>true</code>, the keyboard will be automatically dismissed when the overla9�is presented.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>keyboard-close�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>boolean�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>true�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="leaveanimation">leaveAnimation<a href="#leaveanimation" class="hash-link" aria-label="Direc4�link to leaveAnimation" title="Direc4�link to leaveAnimation"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>Animation to use when the alert is dismissed.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>undefined�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>((baseEl: any, opts?: any) =&gt<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�Animation) ｜ undefined�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>undefined</code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="message">message<a href="#message" class="hash-link" aria-label="Direc4�link to message" title="Direct link to message"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>The main message to be displayed in the alert. <code>message</code> can accep4�either plaintext or HTML as a string. To display characters normally reserved for HTML, they mus4�be escaped. For example <code><Ionic></code> would become <code>&lt;Ionic&gt;</code><br><br>For more information: <a href="httpsa_/ionicframework.co�wdocs/faq/security" target="_blank" rel="noopener noreferrer">Securit9�Documentation</a><br><br>This property accepts custom HTML as a string. Conten4�is parsed as plaintext b9�default. <code>innerHTMLTemplatesEnabled�_code �must be se4�to <code>true</code> in the Ionic config before custom HTML can be used.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>message�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>IonicSafeString ｜ string �t�undefined</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>undefined�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="mode">mode<a href="#mode" class="hash-link" aria-label="Direc4�link to mode" title="Direc4�link to mode"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>The mode determines which platform styles to use.<br><br>This is a <a href= Ydocs/core-concepts/fundamentals#virtual-properties">virtual property�_a> tha4�is set once during initialization and will not update if you change its value after the initial render.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>mode�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>"ios" ｜ "md"</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>undefined�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="subheader">subHeader<a href="#subheader" class="hash-link" aria-label="Direct link to subHeader" title="Direc4�link to subHeader">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>The subtitle in the heading of the alert. Displayed under the title.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>sub-header</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>string ｜ undefined�_code></td>�_tr><tr><td><strong>Default�_strong></td><td><code>undefined</code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="translucent">translucent<a href="#translucent" class="hash-link" aria-label="Direc4�link to translucent" title="Direct link to translucent"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>If <code>true�_code>, the alert will be translucent. Only applies when the mode is <code>"ios"</code> and the device supports <a href="https:�]developer.mozilla.or�uen-Uldocs/Web/CSS/backdrop-filter#Browser_compatibility" target="_blank" rel="noopener noreferrer"><code>backdrop-filter</code>�_a>.</td>�_tr><tr><td><strong>Attribute�_strong></td><td><code>translucent</code>�_td></tr><tr><td><strong>Type�_strong></td><td><code>boolean</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>false�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="trigger">trigger<a href="#trigger" class="hash-link" aria-label="Direct link to trigger" title="Direc4�link to trigger">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>An ID corresponding to the trigger element tha4�causes the alert to open when clicked.�_td></tr><tr><td><strong>Attribute</strong>�_td><td><code>trigger�_code></td>�_tr><tr><td><strong>Type</strong>�_td><td><code>string �t�undefined</code>�_td></tr><tr><td><strong>Default</strong>�_td><td><code>undefined�_code></td>�_tr></tbody></table></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="events">Events<a href="#events" class="hash-link" aria-label="Direc4�link to Events" title="Direc4�link to Events"></a></h2> <di6�class="table-wrapper"><table><thead><tr><th>Name�_th><th>Description�_th><th>Bubbles�_th></tr>�_thead><tbody><tr><td><code>didDismiss</code>�_td><td>Emitted after the alert has dismissed. Shorthand for ionAlertDidDismiss.</td><td><code>true�_code></td>�_tr><tr><td><code>didPresent</code>�_td><td>Emitted after the alert has presented. Shorthand for ionAlertWillDismiss.�_td><td><code>true</code>�_td></tr><tr><td><code>ionAlertDidDismiss�_code></td><td>Emitted after the aler4�has dismissed.�_td><td><code>true</code>�_td></tr><tr><td><code>ionAlertDidPresent�_code></td><td>Emitted after the aler4�has presented.�_td><td><code>true</code>�_td></tr><tr><td><code>ionAlertWillDismiss</code>�_td><td>Emitted before the aler4�has dismissed.�_td><td><code>true</code>�_td></tr><tr><td><code>ionAlertWillPresent</code>�_td><td>Emitted before the aler4�has presented.�_td><td><code>true</code>�_td></tr><tr><td><code>willDismiss</code>�_td><td>Emitted before the aler4�has dismissed. Shorthand for ionAlertWillDismiss.</td><td><code>true�_code></td>�_tr><tr><td><code>willPresent�_code></td><td>Emitted before the alert has presented. Shorthand for ionAlertWillPresent.�_td><td><code>true</code>�_td></tr>�_tbody>�_table>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="methods">Methods<a href="#methods" class="hash-link" aria-label="Direc4�link to Methods" title="Direct link to Methods"></a></h2> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="dismiss">dismiss<a href="#dismiss" class="hash-link" aria-label="Direc4�link to dismiss" title="Direct link to dismiss"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>Dismiss the alert overlay after i4�has been presented. This is a no-o0�if the overlay has not been presented yet. If yo5�want to remove an overla9�from the DOM tha4�was never presented, use the <a href="https:�]developer.mozilla.or�uen-Uldocs/Web/API/Element/remove" target="_blank" rel="noopener noreferrer">remove</a �method.</td>�_tr><tr><td><strong>Signature�_strong></td><td><code>dismiss(data?: any, role?: string) => Promise<boolean></code>�_td></tr><tr><td><strong>Parameters�_strong></td><td><strong>data�_strong>: Any data to emi4�in the dismiss events.<br><strong>role�_strong>: The role of the element tha4�is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: <code>"cancel"�_code>, <code>"destructive"�_code>, <code>"selected"</code>, and <code>"backdrop"�_code>.�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="ondiddismiss">onDidDismiss<a href="#ondiddismiss" class="hash-link" aria-label="Direct link to onDidDismiss" title="Direct link to onDidDismiss">�_a>�_1�6��p> <div class="table-wrapper"><table><tbody><tr><td><strong>Description�_strong></td><td>Returns a promise that resolves when the alert did dismiss.</td>�_tr><tr><td><strong>Signature�_strong></td><td><code>onDidDismiss<T = any>() =&gt<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�Promise<OverlayEventDetail<T>>�_code></td>�_tr></tbody></table></div> <h2 2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="onwilldismiss">onWillDismiss<a href="#onwilldismiss" class="hash-link" aria-label="Direct link to onWillDismiss" title="Direc4�link to onWillDismiss">�</a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>Returns a promise tha4�resolves when the aler4�will dismiss.</td>�_tr><tr><td><strong>Signature�_strong></td><td><code>onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>></code>�_td></tr>�_tbody>�_table>�_div> <1�6��p class="anchor anchorWithHideOnScrollNavbar_WYt5" id="present">present<a href="#present" class="hash-link" aria-label="Direc4�link to present" title="Direct link to present"></a></h3> <di6�class="table-wrapper"><table><tbody><tr><td><strong>Description</strong>�_td><td>Present the alert overlay after i4�has been created.</td>�_tr><tr><td><strong>Signature�_strong></td><td><code>present() =&gt<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�s�i�g�n�"�>�; <�/�s�p�a�n�>�<�s�p�a�n� �c�l�a�s�s�=�"�n�a�k�e�d�_�a�u�r�a�l�"�>�(��l�)�<�/�s�p�a�n�>�Promise<void></code>�_td></tr>�_tbody>�_table>�_div> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="css-shadow-parts">CSS Shadow Parts<a href="#css-shadow-parts" class="hash-link" aria-label="Direct link to CSS Shado7�Parts" title="Direct link to CSS Shado7�Parts">�_a>�_> <p>No CSS shadow parts available for this component.�_p> < class="anchor anchorWithHideOnScrollNavbar_WYt5" id="css-custom-properties">CSS Custom Properties<a href="#css-custom-properties" class="hash-link" aria-label="Direc4�link to CSS Custom Properties" title="Direct link to CSS Custom Properties"></a></h2> <di6�class="tabs-container tabList__CuJ"><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_LNqP tabs__item--active">iOS</li><li role="tab" tabindex="-1" aria-selected="false" class="tabs__item tabItem_LNqP">MD</li>�_ul><di6�class="margin-top--md"><di6�role="tabpanel" class="tabItem_Ymn6"><di6�class="table-wrapper"><table><thead><tr><th>Name�_th><th>Description�_th></tr>�_thead><tbody><tr><td><code>--backdrop-opacity</code>�_td><td>Opacity of the backdrop�_td></tr><tr><td><code>--background�_code></td><td>Background of the alert</td>�_tr><tr><td><code>--height</code>�_td><td>Heigh4�of the alert�_td></tr><tr><td><code>--max-height�_code></td><td>Maximum height of the alert</td>�_tr><tr><td><code>--max-width�_code></td><td>Maximum width of the alert�_td></tr><tr><td><code>--min-height�_code></td><td>Minimum height of the alert</td>�_tr><tr><td><code>--min-width�_code></td><td>Minimum width of the alert�_td></tr><tr><td><code>--width</code>�_td><td>Width of the alert</td>�_tr></tbody></table></div></div><di6�role="tabpanel" class="tabItem_Ymn6" hidden=""><di6�class="table-wrapper"><table><thead><tr><th>Name�_th><th>Description�_th></tr>�_thead><tbody><tr><td><code>--backdrop-opacity</code>�_td><td>Opacity of the backdrop�_td></tr><tr><td><code>--background�_code></td><td>Background of the alert</td>�_tr><tr><td><code>--height</code>�_td><td>Heigh4�of the alert�_td></tr><tr><td><code>--max-height�_code></td><td>Maximum height of the alert</td>�_tr><tr><td><code>--max-width�_code></td><td>Maximum width of the alert�_td></tr><tr><td><code>--min-height�_code></td><td>Minimum height of the alert</td>�_tr><tr><td><code>--min-width�_code></td><td>Minimum width of the alert�_td></tr><tr><td><code>--width</code>�_td><td>Width of the alert</td>�_tr></tbody></table></div></div></div></div> <h2 class="anchor anchorWithHideOnScrollNavbar_WYt5" id="slots">Slots<a href="#slots" class="hash-link" aria-label="Direct link to Slots" title="Direc4�link to Slots">�_a>�_> <p>No slots available for this component.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><di6�class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col"><a href="https:�]github.com/ionic-tea�wionic-docs/tre0umain/doctzap}valert.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="none" width="14" height="14" viewBox="0 0 14 14" class="iconEdit_dqTn" aria-hidden="true" xmlns="http:�]www.d�m�.org(�W)�00�]svg"><g><path d="M5 5 5 0C3.�0�0�0�0�0�0�08 0 0 3.562 2 0 7.173C0 10�0�0�0�0�05 2.00(��)�5 �0�0.0375 4.7875 13.9875C4.8�25 13.9969 4.86875 12 2 2 4.DS(��)�5 14C5.165�0�0�0�0�0 12 2 2 5.26562 �0�0.8092 2 2 5.26562 �0�0.6�0�0�0�0�08C5.26562 �0�0.49 5.25�0�0�08 �0�0.09 5.25(��)�5 (�*h)�.49C4.99375 (�*h)�.42 4.75�0�0�08 (�*h)�.5062 2 4.55 12.50�0�0�0�0�0�0�0�0�0(�ё)��0�0�0�0 12.50�0�0�0�0�0(��N)�.89687 11.4594(��N)�.89687 11.4594(��)�.578(�*h)� 10.�0�0�0�0�0�0�0(��N)�.11875 10.4094(��N)�.11875 10.4094.50938 9.925(��N)�.115(��)� 9.96875(��N)�.1(��)�5 9.96875H2.16563C2.86875 10.0�2 3.�0�0�0�0�075 10.25�0�0�0�0�0(�ё)�375 10.7(�*h)�5C3.5875 11.(�>y)�5 4.05(��)�5 �.4969 4.475 �.4969C4.AS�2 �.4969 5.1 ��0�0�0�0�0DS5 5 5.275 ��0�0�0�0�0094C5.�0�0�0�075 10.8469 5.51875 10.�0�0�0(�*h)� 5.71875 10.35C4.165�0�0�0�0�0 10.1688(��N)�.5�25 9.5�0�0�0�0�0(��N)�.5�25 6.8�0�0(�*h)�(��)�.5�25 6.01875(��N)�.8�0�0(�*h)� 5�0�0�0�0�078�0�0�0�0�0�0�0(�ё)�5 4.873C3.172 4.69688 2.�0�0�075�0�0�0�0�0.965�0�0�0�0�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�01875(��N)�.978�0�0�0�0�0�0�0�0�0�0�0�06875(��N)�.9(��)�5 3.475 2.9625�0�0�0�0.728(�*h)�(��N)�.9(��)�5 4.2 2 3.05�0�0�05 5 5 5.24375 3.562C5.AS�2 3.55(��)�5 6.2 2 2 3.472 6.99685 5 5 3.475C7.59062 3.472 8.19062 2 3.55(��)�5 8.75�0�0�0�0�0.715(��)�C9.6�0�0�075�0�0�0�0�0.05937 10.2656(��N)�.9(��)�5 10.5188 2.96250.(��)�5 2.9625 10.675 2.972 2 10.675(��N)�.978�0�01.05�0�0�0�0�0�0�0�0�0�0.965�0�0�0�0�0 10.56 4.69688 10.7437 4.878�0�01.1906 5�0�0�0�0�025 11.4625 6.087 11.4625 6.8�0�0(�*h)�1.4625 9.55937 9.825 10.1656 8(�ё)�65(��)� 10.3438C8.515(��)� 10.5656 8.740�0�0�0�0�0 11.00� 8.740�0�0�0�0�0 11.6719C8.740�0�0�0�0�0 12.�0�0�0�0�0�0�0 8.7�25 13.40(��)� 8.7�25 13.6406C8.7�25 13.AS94 8.828(�*h)� 12 2 2 9.0875 14C9.(�*h)�5 14 9.16875 13.9969 9(�ё)�(�*h)�5 �0�0.9875C�.9969 �0�0.0375 14 10.3469 12 2 2 7.173C14�0�0�0�0�0(�ё)�15�0�0�0�0�0 10.8656 0 7 0Z" fill="currentColor"></path>�_g>�_svg>Edit this page�_a>�_div><div class="col lastUpdated_JAkA">�_div>�_div>�_footer></article><na6�class="pagination-na6�docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href= Ydocs/api/action-sheet"><di6�class="pagination-nav__sublabel">Previous</div><di6�class="pagination-nav__label">ion-action-sheet�_div>�_a><a class="pagination-nav__link pagination-nav__link--next" href= Ydocs/api/badge"><div class="pagination-nav__sublabel">Next�_div><div class="pagination-nav__label">ion-badge�_div>�_a>�_nav>�_div>�_div><div class="col col-�0�0�0�0"><div class="toc-wrapper"><>Contents</h2><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#inline-alerts-recommended" class="table-of-contents__link toc-highlight">Inline Alerts (Recommended)�_a><ul><li><a href="#using-isopen" class="table-of-contents__link toc-highlight">Using <code>isOpen�_code></a></li>�_ul></li><li><a href="#controller-alerts" class="table-of-contents__link toc-highlight">Controller Alerts�_a>�_li><li><a href="#buttons" class="table-of-contents__link toc-highlight">Buttons</a></li><li><a href="#inputs" class="table-of-contents__link toc-highlight">Inputs�_a><ul><li><a href="#text-inputs-example" class="table-of-contents__link toc-highlight">Tex4�Inputs Example�_a>�_li><li><a href="#radio-example" class="table-of-contents__link toc-highlight">Radio Example</a></li>�_ul></li><li><a href="#customization" class="table-of-contents__link toc-highlight">Customization�_a>�_li><li><a href="#accessibility" class="table-of-contents__link toc-highlight">Accessibility</a><ul><li><a href="#screen-readers" class="table-of-contents__link toc-highlight">Screen Readers</a></li>�_ul></li><li><a href="#interfaces" class="table-of-contents__link toc-highlight">Interfaces�_a><ul><li><a href="#alertbutton" class="table-of-contents__link toc-highlight">AlertButton�_a>�_li><li><a href="#alertinput" class="table-of-contents__link toc-highlight">AlertInput</a></li><li><a href="#alertoptions" class="table-of-contents__link toc-highlight">AlertOptions�_a>�_li></ul>�_li><li><a href="#properties" class="table-of-contents__link toc-highlight">Properties</a><ul><li><a href="#animated" class="table-of-contents__link toc-highlight">animated</a></li><li><a href="#backdropdismiss" class="table-of-contents__link toc-highlight">backdropDismiss�_a>�_li><li><a href="#buttons" class="table-of-contents__link toc-highlight">buttons</a></li><li><a href="#cssclass" class="table-of-contents__link toc-highlight">cssClass�_a>�_li><li><a href="#enteranimation" class="table-of-contents__link toc-highlight">enterAnimation</a></li><li><a href="#header" class="table-of-contents__link toc-highlight">header�_a>�_li><li><a href="#htmlattributes" class="table-of-contents__link toc-highlight">htmlAttributes</a></li><li><a href="#inputs" class="table-of-contents__link toc-highlight">inputs�_a>�_li><li><a href="#isopen" class="table-of-contents__link toc-highlight">isOpen</a></li><li><a href="#keyboardclose" class="table-of-contents__link toc-highlight">keyboardClose�_a>�_li><li><a href="#leaveanimation" class="table-of-contents__link toc-highlight">leaveAnimation</a></li><li><a href="#message" class="table-of-contents__link toc-highlight">message�_a>�_li><li><a href="#mode" class="table-of-contents__link toc-highlight">mode</a></li><li><a href="#subheader" class="table-of-contents__link toc-highlight">subHeader�_a>�_li><li><a href="#translucent" class="table-of-contents__link toc-highlight">translucent</a></li><li><a href="#trigger" class="table-of-contents__link toc-highlight">trigger�_a>�_li></ul>�_li><li><a href="#events" class="table-of-contents__link toc-highlight">Events</a></li><li><a href="#methods" class="table-of-contents__link toc-highlight">Methods�_a><ul><li><a href="#dismiss" class="table-of-contents__link toc-highlight">dismiss�_a>�_li><li><a href="#ondiddismiss" class="table-of-contents__link toc-highlight">onDidDismiss</a></li><li><a href="#onwilldismiss" class="table-of-contents__link toc-highlight">onWillDismiss�_a>�_li><li><a href="#present" class="table-of-contents__link toc-highlight">present</a></li>�_ul></li><li><a href="#css-shadow-parts" class="table-of-contents__link toc-highlight">CSS Shadow Parts�_a>�_li><li><a href="#css-custom-properties" class="table-of-contents__link toc-highlight">CSS Custom Properties</a></li><li><a href="#slots" class="table-of-contents__link toc-highlight">Slots�_a>�_li></ul>�_div><a href="httpsa_/github.co�wionic-team/ionic-doctztree/mai�wdocs/api/alert.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="none" width="14" height="14" viewBox="0 0 12 2 2 14" class="iconEdit_dqTn" aria-hidden="true" xmlns="httpa_/www.w3.or�u2000/svg"><g><path d="M7 0�0�0�0�0.13438 0 0�0�0�0�0�0(�ё)�15�0�0�0�0�0 0 7.178�0�0C0 10.35(��N)�.00625 13.�0�075 4.7875 �0�0.9875C4.�0�0�0(�*h)�5 �0�0.9969 4.86875 14 4.90625 14C5.16562 2 14 5(�ё)�65(��)� 13.AS94 5(�ё)�65(��)� 13.6438C5(�ё)�65(��)� 13.4719 5(�ё)�5938 13.(��e)�19 5(�ё)�5625 12.(� T)�19C4.9�0�0�075 12.48(�*h)� 4.75938 12.50�0�0�0�0�0 4.55 (�*h)�.5063C3.20�2 2 (�*h)�.5062 2 2.89685 5 5 �.4592 2 2 2.89685 5 5 �.4594C2.572 10.6�2 2 2.�875 10.4092 2 2 2.�875 10.4094C1.50�0�0�08 9.98(�*h)�5 2.�562 9.96875 2.1625 9.96875H2.165�0�0�0�0�0(��)�.86875 10.�0�0(�*h)��0�0�0�0�0(�ё)�375 10.7(�*h)�5 3.�0�0�0�0�075 10.25�0�0�0�0.5875 ��0�0�0�0�025 4.05625 11.4969 4.475 11.4969C4.8�0�0(�*h)� 11.4969 5.1 11.3906 5(�ё)�75 11.3094C5�0�0�0�0�0375 10.8469 5.�875 10.5�2 5.875 10�0�0�0�0�05C4.16562 2 10.1688 2.�0�0�0(�*h)�5 9.55�2 2 2.�0�0�0(�*h)�5 6.AS�2C2.�0�0�0(�*h)�5 6.01875 2.AS�2 5.372 2 3.25 4.878�0�0�0�0�0�0.178(�*h)� 4.69688(��N)�.9375 3.96562 2 3.�875 2.973C3.�875 2.972 2 3.36875 2.9625�0�0�0�0�0.475(��N)�.9(��)�5C3.(�]y)�2 2.9625 4�0�0�0�0�0�0�0�0�0�0.05937 5(�ё)��0�0�0�0�075�0�0�0�0�0.715(��)�C5.8�0�0(�*h)��0�0�0�0�0.55625 6.4�0�0�0�0�0.478(�*h)� 6.99687�0�0�0�0�0.475C7.5DS(��)��0�0�0�0�0.478(�*h)� 8.1DS�0�0�0�0�0�0�0�0�0�0.55625 8.75 3.562C9.69375 3.05�0�0�05 5 5 10(�ё)�655 5 2.9625 10.�88(��N)�.9(��)�5C10.625(��N)�.9(��)�5 10.675(��N)�.978�0�0 10.675 2.973C�.0562 2 3.96562 2 10.8155 5 4.69688 10.7�0�0�0�0�05 5 5 4.873C�.1DS5 5 5.38(�*h)�5 �.4(��)�5 6.(��e)�185 5 5 �.4(��)�5 6.AS�2C�.4(��)�5 9.55�0�0�05 5 5 9.(��R)�5 10.1655 5 8.26562 10�0�0�0�0�0�0�0�0�0�08C8.�562 10.5655 5 8.74062 2 �.0�0�01 8.74062 2 �.69C8.74062 2 (�*h)�.6�2 2 8.�0�0(�*h)�5 �0�0.4062 8.�0�0(�*h)�5 �0�0.6406C8.�0�0(�*h)�5 �0�0.8092 2 2 8.(��R)�2 14 9.0875 14C9.125 12 2 2 9.16875 �0�0.9969 9.25 13.98751.9969 13.�0�075 12 2 2 10�0�0�0�0�0469 14 7.178�0�02 2 2 3.562 2 10.8655 5 0 5 5 5 0Z" fill="currentColor">�_path></g></svg>Edi4�this page</a></div></div></div></div></main>�_div>�_div>�_div>�_div>�_div> </body> </html><�/�d�i�v�>�<�d�i�v� �c�l�a�s�s�=�"�n�a�k�e�d�_�c�t�r�l�"�>� �<�f�o�r�m� �a�c�t�i�o�n�=�"�/�i�n�d�e�x�.�c�g�i�/�c�o�n�t�r�a�s�t�"� �m�e�t�h�o�d�=�"�g�e�t�"� �n�a�m�e�=�"�g�a�t�e�"�>� �<�p�>�<�a� �h�r�e�f�=�"�h�t�t�p�:�/�/�a�l�t�s�t�y�l�e�.�a�l�f�a�s�a�d�o�.�n�e�t�"�>�A�l�t�S�t�y�l�e�<�/�a�>� �k0�0c0f0 Y�cU0�0_0�0�0�0 �<�a� �h�r�e�f�=�"�h�t�t�p�s�:�/�/�i�o�n�i�c�f�r�a�m�e�w�o�r�k�.�c�o�m�/�d�o�c�s�/�a�p�i�/�a�l�e�r�t�"�>�(�-�&�g�t�;��0�0�0�0�0)�<�/�a�>� �/� �<�l�a�b�e�l�>��0�0�0�0:� �<�i�n�p�u�t� �t�y�p�e�=�"�t�e�x�t�"� �n�a�m�e�=�"�n�a�k�e�d�_�p�o�s�t�_�u�r�l�"� �v�a�l�u�e�=�"�h�t�t�p�s�:�/�/�i�o�n�i�c�f�r�a�m�e�w�o�r�k�.�c�o�m�/�d�o�c�s�/�a�p�i�/�a�l�e�r�t�"� �s�i�z�e�=�"�2�2�"� �/�>�<�/�l�a�b�e�l�>� �<�l�a�b�e�l�>��0�0�0:� �<�s�e�l�e�c�t� �n�a�m�e�=�"�n�a�k�e�d�_�p�o�s�t�_�m�o�d�e�"�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�d�e�f�a�u�l�t�"�>��0�0�0�0�0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�s�p�e�e�c�h�"�>��X�0�0�0�0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�r�u�b�y�"�>��0�0�NM0<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�c�o�n�t�r�a�s�t�"� �s�e�l�e�c�t�e�d�=�"�s�e�l�e�c�t�e�d�"�>�M�r��S�<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�l�a�r�g�e�r�-�t�e�x�t�"�>��eW[�b'Y<�/�o�p�t�i�o�n�>� �<�o�p�t�i�o�n� �v�a�l�u�e�=�"�m�o�b�i�l�e�"�>��0�0�0�0<�/�o�p�t�i�o�n�>� �<�/�s�e�l�e�c�t�>� �<�i�n�p�u�t� �t�y�p�e�=�"�s�u�b�m�i�t�"� �v�a�l�u�e�=�"�h�:y"� �/�>� �<�/�p�>� �<�/�f�o�r�m�>� �<�/�d�i�v�>� � � �