# UI Components

URL: https://ionicframework.com/docs/components

Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](/docs/api.md) for a complete list of each component and sub-component.

[![](/docs/icons/feature-component-accordion-icon.png) Accordion Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.](/docs/api/accordion.md) [![](/docs/icons/component-action-sheet-icon.png) ![](/docs/icons/component-action-sheet-icon.png)
Action Sheet Action Sheets display a set of options with the ability to confirm or cancel an action.](/docs/api/action-sheet.md) [![](/docs/icons/component-alert-icon.png) ![](/docs/icons/component-alert-icon.png)
Alert Alerts are a great way to offer the user the ability to choose a specific action or list of actions.](/docs/api/alert.md) [![](/docs/icons/component-badge-icon.png) ![](/docs/icons/component-badge-icon.png)
Badge Badges are a small component that typically communicate a numerical value to the user.](/docs/api/badge.md) [![](/docs/icons/component-breadcrumbs-icon.png) ![](/docs/icons/component-breadcrumbs-icon.png)
Breadcrumbs Breadcrumbs are navigation items that are used to indicate where a user is on an app.](/docs/api/breadcrumbs.md) [![](/docs/icons/component-button-icon.png) ![](/docs/icons/component-button-icon.png)
Button Buttons let your users take action. They're an essential way to interact with and navigate through an app.](/docs/api/button.md) [![](/docs/icons/component-card-icon.png) ![](/docs/icons/component-card-icon.png)
Card Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.](/docs/api/card.md) [![](/docs/icons/component-checkbox-icon.png) ![](/docs/icons/component-checkbox-icon.png)
Checkbox Checkboxes can be used to let the user know they need to make a binary decision.](/docs/api/checkbox.md) [![](/docs/icons/component-chip-icon.png) ![](/docs/icons/component-chip-icon.png)
Chip Chips are a compact way to display data or actions.](/docs/api/chip.md) [![](/docs/icons/component-content-icon.png) ![](/docs/icons/component-content-icon.png)
Content Content is the quintessential way to interact with and navigate through an app.](/docs/api/content.md) [![](/docs/icons/feature-component-datetime-icon.png) Date & Time Pickers Date & time pickers are used to present an interface that makes it easy for users to select dates and times.](/docs/api/datetime.md) [![](/docs/icons/component-fab-icon.png) ![](/docs/icons/component-fab-icon.png)
Floating Action Button Floating action buttons are circular buttons that perform a primary action on a screen.](/docs/api/fab.md) [![](/docs/icons/component-grid-icon.png) ![](/docs/icons/component-grid-icon.png)
Grid The grid is a powerful mobile-first system for building custom layouts.](/docs/api/grid.md) [![](/docs/icons/component-icons-icon.png) ![](/docs/icons/component-icons-icon.png)
Icons Beautifully designed icons for use in web, iOS, and Android apps.](/docs/api/icon.md) [![](/docs/icons/component-infinitescroll-icon.png) ![](/docs/icons/component-infinitescroll-icon.png)
Infinite Scroll Infinite scroll allows you to load new data as the user scrolls through your app.](/docs/api/infinite-scroll.md) [![](/docs/icons/component-input-icon.png) ![](/docs/icons/component-input-icon.png)
Inputs Inputs provide a way for users to enter data in your app.](/docs/api/input.md) [![](/docs/icons/feature-component-item-icon.png) Item Items 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.](/docs/api/item.md) [![](/docs/icons/component-lists-icon.png) ![](/docs/icons/component-lists-icon.png)
List Lists can display rows of information, such as a contact list, playlist, or menu.](/docs/api/list.md) [![](/docs/icons/component-media-icon.png) ![](/docs/icons/component-media-icon.png)
Media A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual content.](/docs/api/avatar.md) [![](/docs/icons/component-menu-icon.png) ![](/docs/icons/component-menu-icon.png)
Menu Menus are a common navigation pattern. They can be permanently on-screen, or revealed when needed.](/docs/api/menu.md) [![](/docs/icons/component-modal-icon.png) ![](/docs/icons/component-modal-icon.png)
Modal Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.](/docs/api/modal.md) [![](/docs/icons/component-navigation-icon.png) ![](/docs/icons/component-navigation-icon.png)
Navigation Navigation is how users move between different pages in your app.](/docs/api/nav.md) [![](/docs/icons/component-popover-icon.png) ![](/docs/icons/component-popover-icon.png)
Popover Popover provides an easy way to present information or options without changing contexts.](/docs/api/popover.md) [![](/docs/icons/component-progress-icon.png) ![](/docs/icons/component-progress-icon.png)
Progress Indicators Progress indicators visualize the progression of an operation or activity.](/docs/api/progress-bar.md) [![](/docs/icons/component-radio-icon.png) ![](/docs/icons/component-radio-icon.png)
Radio Radio inputs allow you to present a set of exclusive options.](/docs/api/radio.md) [![](/docs/icons/component-range-icon.png) ![](/docs/icons/component-range-icon.png)
Range Range sliders let users select a value by dragging a knob along a track.](/docs/api/range.md) [![](/docs/icons/feature-component-refresher-icon.png) Refresher Refresher provides pull-to-refresh functionality on a content component.](/docs/api/refresher.md) [![](/docs/icons/component-reorder-icon.png) ![](/docs/icons/component-reorder-icon.png)
Reorder Reorder lets users drag and drop to reorder a list of items.](/docs/api/reorder.md) [![](/docs/icons/component-routing-icon.png) ![](/docs/icons/component-routing-icon.png)
Routing Routing allows navigation based on the current path.](/docs/api/router.md) [![](/docs/icons/component-searchbar-icon.png) ![](/docs/icons/component-searchbar-icon.png)
Searchbar Searchbar is used to search or filter items, usually from a toolbar.](/docs/api/searchbar.md) [![](/docs/icons/component-segment-icon.png) ![](/docs/icons/component-segment-icon.png)
Segment Segments provide a set of exclusive buttons that can be used as a filter or view switcher.](/docs/api/segment.md) [![](/docs/icons/component-select-icon.png) ![](/docs/icons/component-select-icon.png)
Select Select is similar to the native HTML select, with a few improvements to sorting and selecting.](/docs/api/select.md) [![](/docs/icons/feature-component-tabs-icon.png) Tabs Tabs enable tabbed navigation, a standard navigation pattern in modern apps.](/docs/api/tabs.md) [![](/docs/icons/component-toast-icon.png) ![](/docs/icons/component-toast-icon.png)
Toast Toasts are subtle notifications that appear over your app's content without interrupting user interaction.](/docs/api/toast.md) [![](/docs/icons/component-toggle-icon.png) ![](/docs/icons/component-toggle-icon.png)
Toggle Toggles are an input for binary options, often used for options and switches.](/docs/api/toggle.md) [![](/docs/icons/component-toolbar-icon.png) ![](/docs/icons/component-toolbar-icon.png)
Toolbar Toolbars are used to house information and actions relating to your app.](/docs/api/toolbar.md) [![](/docs/icons/component-typography-icon.png) ![](/docs/icons/component-typography-icon.png)
Typography Text is used to style or change the color of text within an application.](/docs/api/text.md)