| Skip to main content | https://staging.ionicframework.com/docs/components#__docusaurus_skipToContent_fallback |
| An OutSystems Company → | 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 |
| https://staging.ionicframework.com/docs/ |
| https://staging.ionicframework.com/docs/ |
| Getting Started | https://staging.ionicframework.com/docs/components |
| UI Components | https://staging.ionicframework.com/docs/components |
| Accordion | https://staging.ionicframework.com/docs/api/accordion |
| ion-accordion | https://staging.ionicframework.com/docs/api/accordion |
| ion-accordion-group | https://staging.ionicframework.com/docs/api/accordion-group |
| Action Sheet | https://staging.ionicframework.com/docs/api/action-sheet |
| ion-action-sheet | https://staging.ionicframework.com/docs/api/action-sheet |
| Alert | https://staging.ionicframework.com/docs/api/alert |
| ion-alert | https://staging.ionicframework.com/docs/api/alert |
| Badge | https://staging.ionicframework.com/docs/api/badge |
| ion-badge | https://staging.ionicframework.com/docs/api/badge |
| Breadcrumbs | https://staging.ionicframework.com/docs/api/breadcrumb |
| ion-breadcrumb | https://staging.ionicframework.com/docs/api/breadcrumb |
| ion-breadcrumbs | https://staging.ionicframework.com/docs/api/breadcrumbs |
| Button | https://staging.ionicframework.com/docs/api/button |
| ion-button | https://staging.ionicframework.com/docs/api/button |
| ion-ripple-effect | https://staging.ionicframework.com/docs/api/ripple-effect |
| Card | https://staging.ionicframework.com/docs/api/card |
| ion-card | https://staging.ionicframework.com/docs/api/card |
| ion-card-content | https://staging.ionicframework.com/docs/api/card-content |
| ion-card-header | https://staging.ionicframework.com/docs/api/card-header |
| ion-card-subtitle | https://staging.ionicframework.com/docs/api/card-subtitle |
| ion-card-title | https://staging.ionicframework.com/docs/api/card-title |
| Checkbox | https://staging.ionicframework.com/docs/api/checkbox |
| ion-checkbox | https://staging.ionicframework.com/docs/api/checkbox |
| Chip | https://staging.ionicframework.com/docs/api/chip |
| ion-chip | https://staging.ionicframework.com/docs/api/chip |
| Content | https://staging.ionicframework.com/docs/api/app |
| ion-app | https://staging.ionicframework.com/docs/api/app |
| ion-content | https://staging.ionicframework.com/docs/api/content |
| Date & Time Pickers | https://staging.ionicframework.com/docs/api/datetime |
| ion-datetime | https://staging.ionicframework.com/docs/api/datetime |
| ion-datetime-button | https://staging.ionicframework.com/docs/api/datetime-button |
| ion-picker | https://staging.ionicframework.com/docs/api/picker |
| ion-picker-column | https://staging.ionicframework.com/docs/api/picker-column |
| ion-picker-column-option | https://staging.ionicframework.com/docs/api/picker-column-option |
| ion-picker-legacy | https://staging.ionicframework.com/docs/api/picker-legacy |
| Floating Action Button | https://staging.ionicframework.com/docs/api/fab |
| ion-fab | https://staging.ionicframework.com/docs/api/fab |
| ion-fab-button | https://staging.ionicframework.com/docs/api/fab-button |
| ion-fab-list | https://staging.ionicframework.com/docs/api/fab-list |
| Grid | https://staging.ionicframework.com/docs/api/grid |
| ion-grid | https://staging.ionicframework.com/docs/api/grid |
| ion-col | https://staging.ionicframework.com/docs/api/col |
| ion-row | https://staging.ionicframework.com/docs/api/row |
| Icons | https://staging.ionicframework.com/docs/api/icon |
| ion-icon | https://staging.ionicframework.com/docs/api/icon |
| Infinite Scroll | https://staging.ionicframework.com/docs/api/infinite-scroll |
| ion-infinite-scroll | https://staging.ionicframework.com/docs/api/infinite-scroll |
| ion-infinite-scroll-content | https://staging.ionicframework.com/docs/api/infinite-scroll-content |
| Inputs | https://staging.ionicframework.com/docs/api/input |
| ion-input | https://staging.ionicframework.com/docs/api/input |
| ion-input-password-toggle | https://staging.ionicframework.com/docs/api/input-password-toggle |
| ion-input-otp | https://staging.ionicframework.com/docs/api/input-otp |
| ion-textarea | https://staging.ionicframework.com/docs/api/textarea |
| Item | https://staging.ionicframework.com/docs/api/item |
| ion-item | https://staging.ionicframework.com/docs/api/item |
| ion-item-divider | https://staging.ionicframework.com/docs/api/item-divider |
| ion-item-group | https://staging.ionicframework.com/docs/api/item-group |
| ion-item-sliding | https://staging.ionicframework.com/docs/api/item-sliding |
| ion-item-options | https://staging.ionicframework.com/docs/api/item-options |
| ion-item-option | https://staging.ionicframework.com/docs/api/item-option |
| ion-label | https://staging.ionicframework.com/docs/api/label |
| ion-note | https://staging.ionicframework.com/docs/api/note |
| List | https://staging.ionicframework.com/docs/api/list |
| ion-list | https://staging.ionicframework.com/docs/api/list |
| ion-list-header | https://staging.ionicframework.com/docs/api/list-header |
| Media | https://staging.ionicframework.com/docs/api/avatar |
| ion-avatar | https://staging.ionicframework.com/docs/api/avatar |
| ion-icon | https://staging.ionicframework.com/docs/api/icon |
| ion-img | https://staging.ionicframework.com/docs/api/img |
| ion-thumbnail | https://staging.ionicframework.com/docs/api/thumbnail |
| Menu | https://staging.ionicframework.com/docs/api/menu |
| ion-menu | https://staging.ionicframework.com/docs/api/menu |
| ion-menu-button | https://staging.ionicframework.com/docs/api/menu-button |
| ion-menu-toggle | https://staging.ionicframework.com/docs/api/menu-toggle |
| ion-split-pane | https://staging.ionicframework.com/docs/api/split-pane |
| Modal | https://staging.ionicframework.com/docs/api/modal |
| ion-modal | https://staging.ionicframework.com/docs/api/modal |
| ion-backdrop | https://staging.ionicframework.com/docs/api/backdrop |
| Navigation | https://staging.ionicframework.com/docs/api/nav |
| ion-nav | https://staging.ionicframework.com/docs/api/nav |
| ion-nav-link | https://staging.ionicframework.com/docs/api/nav-link |
| Popover | https://staging.ionicframework.com/docs/api/popover |
| ion-popover | https://staging.ionicframework.com/docs/api/popover |
| Progress Indicators | https://staging.ionicframework.com/docs/api/loading |
| ion-loading | https://staging.ionicframework.com/docs/api/loading |
| ion-progress-bar | https://staging.ionicframework.com/docs/api/progress-bar |
| ion-skeleton-text | https://staging.ionicframework.com/docs/api/skeleton-text |
| ion-spinner | https://staging.ionicframework.com/docs/api/spinner |
| Radio | https://staging.ionicframework.com/docs/api/radio |
| ion-radio | https://staging.ionicframework.com/docs/api/radio |
| ion-radio-group | https://staging.ionicframework.com/docs/api/radio-group |
| Range | https://staging.ionicframework.com/docs/api/range |
| ion-range | https://staging.ionicframework.com/docs/api/range |
| Refresher | https://staging.ionicframework.com/docs/api/refresher |
| ion-refresher | https://staging.ionicframework.com/docs/api/refresher |
| ion-refresher-content | https://staging.ionicframework.com/docs/api/refresher-content |
| Reorder | https://staging.ionicframework.com/docs/api/reorder |
| ion-reorder | https://staging.ionicframework.com/docs/api/reorder |
| ion-reorder-group | https://staging.ionicframework.com/docs/api/reorder-group |
| Routing | https://staging.ionicframework.com/docs/api/router |
| ion-router | https://staging.ionicframework.com/docs/api/router |
| ion-router-link | https://staging.ionicframework.com/docs/api/router-link |
| ion-router-outlet | https://staging.ionicframework.com/docs/api/router-outlet |
| ion-route | https://staging.ionicframework.com/docs/api/route |
| ion-route-redirect | https://staging.ionicframework.com/docs/api/route-redirect |
| Searchbar | https://staging.ionicframework.com/docs/api/searchbar |
| ion-searchbar | https://staging.ionicframework.com/docs/api/searchbar |
| Segment | https://staging.ionicframework.com/docs/api/segment |
| ion-segment | https://staging.ionicframework.com/docs/api/segment |
| ion-segment-button | https://staging.ionicframework.com/docs/api/segment-button |
| ion-segment-content | https://staging.ionicframework.com/docs/api/segment-content |
| ion-segment-view | https://staging.ionicframework.com/docs/api/segment-view |
| Select | https://staging.ionicframework.com/docs/api/select |
| ion-select | https://staging.ionicframework.com/docs/api/select |
| ion-select-option | https://staging.ionicframework.com/docs/api/select-option |
| Tabs | https://staging.ionicframework.com/docs/api/tabs |
| ion-tabs | https://staging.ionicframework.com/docs/api/tabs |
| ion-tab | https://staging.ionicframework.com/docs/api/tab |
| ion-tab-bar | https://staging.ionicframework.com/docs/api/tab-bar |
| ion-tab-button | https://staging.ionicframework.com/docs/api/tab-button |
| Toast | https://staging.ionicframework.com/docs/api/toast |
| ion-toast | https://staging.ionicframework.com/docs/api/toast |
| Toggle | https://staging.ionicframework.com/docs/api/toggle |
| ion-toggle | https://staging.ionicframework.com/docs/api/toggle |
| Toolbar | https://staging.ionicframework.com/docs/api/toolbar |
| ion-toolbar | https://staging.ionicframework.com/docs/api/toolbar |
| ion-header | https://staging.ionicframework.com/docs/api/header |
| ion-footer | https://staging.ionicframework.com/docs/api/footer |
| ion-title | https://staging.ionicframework.com/docs/api/title |
| ion-buttons | https://staging.ionicframework.com/docs/api/buttons |
| ion-back-button | https://staging.ionicframework.com/docs/api/back-button |
| Typography | https://staging.ionicframework.com/docs/api/text |
| ion-text | https://staging.ionicframework.com/docs/api/text |
| Resources | https://staging.ionicframework.com/docs/api |
| API Index | https://staging.ionicframework.com/docs/api |
| https://staging.ionicframework.com/docs/ |
| Guide | https://staging.ionicframework.com/docs/ |
| Components | https://staging.ionicframework.com/docs/components |
| CLI | https://staging.ionicframework.com/docs/cli |
| Native | https://staging.ionicframework.com/docs/native |
| Ionic v8.0.0 Upgrade Guide | https://staging.ionicframework.com/docs/updating/8-0 |
| v8 | https://staging.ionicframework.com/docs/components |
| v8 | https://staging.ionicframework.com/docs/components |
| v7 | https://staging.ionicframework.com/docs/v7/components |
| v6 | https://ionic-docs-lq0if04rc-ionic1.vercel.app/docs/v6 |
| v5 | https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5 |
| v4 | https://ionicframework.com/docs/v4/components |
| v3 | https://ionicframework.com/docs/v3/ |
| Community | https://staging.ionicframework.com/docs/components |
| Community Hub | https://ionicframework.com/community |
| Forum | https://forum.ionicframework.com/ |
| Meetups | https://www.meetup.com/topics/ionic-framework/ |
| Blog | https://blog.ionicframework.com/ |
| Twitter | https://twitter.com/ionicframework |
| Support | https://staging.ionicframework.com/docs/components |
| Help Center | https://ionicframework.com/support |
| Customer Support | https://ionic.zendesk.com/ |
| Enterprise Advisory | https://ionicframework.com/advisory |
| English | https://staging.ionicframework.com/docs/components |
| English | https://staging.ionicframework.com/docs/components |
| 日本語 | https://staging.ionicframework.com/docs/ja/components |
| Translate | https://ionicframework.com/translate |
| https://twitter.com/Ionicframework |
| https://ionic.link/discord |
| https://github.com/ionic-team/ionic-framework |
| API Index | https://staging.ionicframework.com/docs/api |
| AccordionAccordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. | https://staging.ionicframework.com/docs/api/accordion |
| Action SheetAction Sheets display a set of options with the ability to confirm or cancel an action. | https://staging.ionicframework.com/docs/api/action-sheet |
| AlertAlerts are a great way to offer the user the ability to choose a specific action or list of actions. | https://staging.ionicframework.com/docs/api/alert |
| BadgeBadges are a small component that typically communicate a numerical value to the user. | https://staging.ionicframework.com/docs/api/badge |
| BreadcrumbsBreadcrumbs are navigation items that are used to indicate where a user is on an app. | https://staging.ionicframework.com/docs/api/breadcrumbs |
| ButtonButtons let your users take action. They're an essential way to interact with and navigate through an app. | https://staging.ionicframework.com/docs/api/button |
| CardCards are a great way to display an important piece of content, and can contain images, buttons, text, and more. | https://staging.ionicframework.com/docs/api/card |
| CheckboxCheckboxes can be used to let the user know they need to make a binary decision. | https://staging.ionicframework.com/docs/api/checkbox |
| ChipChips are a compact way to display data or actions. | https://staging.ionicframework.com/docs/api/chip |
| ContentContent is the quintessential way to interact with and navigate through an app. | https://staging.ionicframework.com/docs/api/content |
| Date & Time PickersDate & time pickers are used to present an interface that makes it easy for users to select dates and times. | https://staging.ionicframework.com/docs/api/datetime |
| Floating Action ButtonFloating action buttons are circular buttons that perform a primary action on a screen. | https://staging.ionicframework.com/docs/api/fab |
| GridThe grid is a powerful mobile-first system for building custom layouts. | https://staging.ionicframework.com/docs/api/grid |
| IconsBeautifully designed icons for use in web, iOS, and Android apps. | https://staging.ionicframework.com/docs/api/icon |
| Infinite ScrollInfinite scroll allows you to load new data as the user scrolls through your app. | https://staging.ionicframework.com/docs/api/infinite-scroll |
| InputsInputs provides a way for users to enter data in your app. | https://staging.ionicframework.com/docs/api/input |
| ItemItems are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements.
Items can be swiped, deleted, reordered, edited, and more. | https://staging.ionicframework.com/docs/api/item |
| ListLists can display rows of information, such as a contact list, playlist, or menu. | https://staging.ionicframework.com/docs/api/list |
| MediaA collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual
content. | https://staging.ionicframework.com/docs/api/avatar |
| MenuMenus are a common navigation pattern. They can be permanently on-screen, or revealed when needed. | https://staging.ionicframework.com/docs/api/menu |
| ModalModals slide in and off screen to display a temporary UI and are often used for login or sign-up pages. | https://staging.ionicframework.com/docs/api/modal |
| NavigationNavigation is how users move between different pages in your app. | https://staging.ionicframework.com/docs/api/nav |
| PopoverPopover provides an easy way to present information or options without changing contexts. | https://staging.ionicframework.com/docs/api/popover |
| Progress IndicatorsProgress indicators visualize the progression of an operation or activity. | https://staging.ionicframework.com/docs/api/progress-bar |
| RadioRadio inputs allow you to present a set of exclusive options. | https://staging.ionicframework.com/docs/api/radio |
| RangeRange sliders let users select a value by dragging a knob along a track. | https://staging.ionicframework.com/docs/api/range |
| RefresherRefresher provides pull-to-refresh functionality on a content component. | https://staging.ionicframework.com/docs/api/refresher |
| ReorderReorder lets users drag and drop to reorder a list of items. | https://staging.ionicframework.com/docs/api/reorder |
| RoutingRouting allows navigation based on the current path. | https://staging.ionicframework.com/docs/api/router |
| SearchbarSearchbar is used to search or filter items, usually from a toolbar. | https://staging.ionicframework.com/docs/api/searchbar |
| SegmentSegments provide a set of exclusive buttons that can be used as a filter or view switcher. | https://staging.ionicframework.com/docs/api/segment |
| SelectSelect is similar to the native HTML select, with a few improvements to sorting and selecting. | https://staging.ionicframework.com/docs/api/select |
| TabsTabs enable tabbed navigation, a standard navigation pattern in modern apps. | https://staging.ionicframework.com/docs/api/tabs |
| ToastToasts are subtle notifications that appear over your app's content without interrupting user interaction. | https://staging.ionicframework.com/docs/api/toast |
| ToggleToggles are an input for binary options, often used for options and switches. | https://staging.ionicframework.com/docs/api/toggle |
| ToolbarToolbars are used to house information and actions relating to your app. | https://staging.ionicframework.com/docs/api/toolbar |
| TypographyText is used to style or change the color of text within an application. | https://staging.ionicframework.com/docs/api/text |
| Edit this page | https://github.com/ionic-team/ionic-docs/edit/main/docs/components.md |
| Nextion-accordion | https://staging.ionicframework.com/docs/api/accordion |