components-data.json

{
  "about-modal": {
    "illustration": "./img/component-illustrations/about-modal.png",
    "summary": "An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."
  },
  "accordion": {
    "illustration": "./img/component-illustrations/accordion.png",
    "summary": "An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."
  },
  "action-list": {
    "illustration": "./img/component-illustrations/action-list.png",
    "summary": "An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."
  },
  "alert": {
    "illustration": "./img/component-illustrations/alert.png",
    "summary": "An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."
  },
  "application-launcher": {
    "illustration": "./img/component-illustrations/application-launcher.png",
    "summary": "An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."
  },
  "avatar": {
    "illustration": "./img/component-illustrations/avatar.png",
    "summary": "An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."
  },
  "back-to-top": {
    "illustration": "./img/component-illustrations/back-to-top.png",
    "summary": "The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."
  },
  "backdrop": {
    "illustration": "./img/component-illustrations/backdrop.png",
    "summary": "A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."
  },
  "background-image": {
    "illustration": "./img/component-illustrations/background-image.png",
    "summary": "A <b>background image</b> is an image that fills the background of a page."
  },
  "badge": {
    "illustration": "./img/component-illustrations/badge.png",
    "summary": "A <b>badge</b> is an annotation that displays a numeric value."
  },
  "banner": {
    "illustration": "./img/component-illustrations/banner.png",
    "summary": "A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."
  },
  "brand": {
    "illustration": "./img/component-illustrations/brand.png",
    "summary": "A <b>brand</b> is a visual representation of a product&mdash;typically its logo."
  },
  "breadcrumb": {
    "illustration": "./img/component-illustrations/breadcrumb.png",
    "summary": "A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."
  },
  "button": {
    "illustration": "./img/component-illustrations/button.png",
    "summary": "A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."
  },
  "calendar-month": {
    "illustration": "./img/component-illustrations/calendar-month.png",
    "summary": "A <b>calendar month</b> component allows users to select and navigate between days, months, and years."
  },
  "card": {
    "illustration": "./img/component-illustrations/card.png",
    "summary": "A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."
  },
  "checkbox": {
    "illustration": "./img/component-illustrations/checkbox.png",
    "summary": "A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."
  },
  "chip": {
    "illustration": "./img/component-illustrations/chip.png",
    "summary": "A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <Link to='/components/label'>the label component</Link> instead."
  },
  "clipboard-copy": {
    "illustration": "./img/component-illustrations/clipboard-copy.png",
    "summary": "The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."
  },
  "code-block": {
    "illustration": "./img/component-illustrations/code-block.png",
    "summary": "A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."
  },
  "code-editor": {
    "illustration": "./img/component-illustrations/code-editor.png",
    "summary": "A <b>code editor</b> is a versatile <Link to='https://microsoft.github.io/monaco-editor/'>Monaco-based</Link> text editor that supports various programming languages."
  },
  "content": {
    "illustration": "./img/component-illustrations/context-selector.png",
    "summary": "A <b>content</b> component contains a block of styled HTML content."
  },
  "context-selector": {
    "illustration": "./img/component-illustrations/context-selector.png",
    "summary": "A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."
  },
  "custom-menus": {
    "illustration": "./img/component-illustrations/custom-menus.png",
    "summary": "<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <Link to='/components/menus/menu'>menus</Link> and <Link to='/components/menus/menu-toggle'>menu toggles.</Link>"
  },
  "data-list": {
    "illustration": "./img/component-illustrations/data-list.png",
    "summary": "A <b>data list</b> displays large data sets and interactive content in a flexible layout."
  },
  "date-picker": {
    "illustration": "./img/component-illustrations/date-picker.png",
    "summary": "A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."
  },
  "date-and-time-picker": {
    "illustration": "./img/component-illustrations/date-and-time-picker.png",
    "summary": "A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <Link to='/components/date-and-time/date-picker'>date picker</Link> and <Link to='/components/date-and-time/time-picker'>time picker</Link> components."
  },
  "description-list": {
    "illustration": "./img/component-illustrations/description-list.png",
    "summary": "A <b>description list</b> displays terms and their corresponding descriptions."
  },
  "divider": {
    "illustration": "./img/component-illustrations/divider.png",
    "summary": "A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."
  },
  "drag-and-drop": {
    "illustration": "./img/component-illustrations/drag-and-drop.png",
    "summary": "The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."
  },
  "drawer": {
    "illustration": "./img/component-illustrations/drawer.png",
    "summary": "A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."
  },
  "dropdown": {
    "illustration": "./img/component-illustrations/dropdown.png",
    "summary": "A <b>dropdown</b> displays a menu of actions that trigger a process and links that navigate to a new location."
  },
  "dual-list-selector": {
    "illustration": "./img/component-illustrations/dual-list-selector.png",
    "summary": "A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."
  },
  "empty-state": {
    "illustration": "./img/component-illustrations/empty-state.png",
    "summary": "An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."
  },
  "expandable-section": {
    "illustration": "./img/component-illustrations/expandable-section.png",
    "summary": "An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."
  },
  "multiple-file-upload": {
    "illustration": "./img/component-illustrations/file-upload-multiple.png",
    "summary": "A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."
  },
  "simple-file-upload": {
    "illustration": "./img/component-illustrations/file-upload.png",
    "summary": "A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."
  },
  "form-control": {
    "illustration": "./img/component-illustrations/form-control.png",
    "summary": "A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."
  },
  "form": {
    "illustration": "./img/component-illustrations/form.png",
    "summary": "A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."
  },
  "form-select": {
    "illustration": "./img/component-illustrations/form-select.png",
    "summary": "A <b>form select</b> is a form element that embeds browser-native menus."
  },
  "helper-text": {
    "illustration": "./img/component-illustrations/helper-text.png",
    "summary": "<b>Helper text</b> is a text-based support method that adds additional context to field inputs."
  },
  "hint": {
    "illustration": "./img/component-illustrations/hint.png",
    "summary": "A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page."
  },
  "icon": {
    "illustration": "./img/component-illustrations/icon.png",
    "summary": "An <b>icon</b> component is a container that supports <Link to='/foundations-and-styles/iconography#all-icons'>icons</Link> of varying dimensions and styles, as well as <Link to='/components/spinner'>spinners.</Link>"
  },
  "inline-edit": {
    "illustration": "./img/component-illustrations/inline-edit.png",
    "summary": "An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."
  },
  "input-group": {
    "illustration": "./img/component-illustrations/input-group.png",
    "summary": "An <b>input group</b> combines multiple related controls or inputs to appear as a single control."
  },
  "jump-links": {
    "illustration": "./img/component-illustrations/jump-links.png",
    "summary": "When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."
  },
  "label": {
    "illustration": "./img/component-illustrations/label.png",
    "summary": "A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."
  },
  "list": {
    "illustration": "./img/component-illustrations/list.png",
    "summary": "A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."
  },
  "login-page": {
    "illustration": "./img/component-illustrations/login-page.png",
    "summary": "A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."
  },
  "masthead": {
    "illustration": "./img/component-illustrations/masthead.png",
    "summary": "A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."
  },
  "menu-toggle": {
    "illustration": "./img/component-illustrations/menu-toggle.png",
    "summary": "A <b>menu toggle</b> is a selectable control that opens and closes a <Link to='/components/menus/dropdown'>dropdown</Link>, <Link to='/components.menus/select'>select</Link>, or <Link to='/components/menus/menu'>menu</Link> component."
  },
  "menu": {
    "illustration": "./img/component-illustrations/menu.png",
    "summary": "A <b>menu</b> is a list of options or actions that users can choose from."
  },
  "modal": {
    "illustration": "./img/component-illustrations/modal.png",
    "summary": "A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."
  },
  "navigation": {
    "illustration": "./img/component-illustrations/navigation.png",
    "summary": "A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."
  },
  "notification-badge": {
    "illustration": "./img/component-illustrations/notification-badge.png",
    "summary": "A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."
  },
  "notification-drawer": {
    "illustration": "./img/component-illustrations/notification-drawer.png",
    "summary": "A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."
  },
  "number-input": {
    "illustration": "./img/component-illustrations/number-input.png",
    "summary": "A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."
  },
  "options-menu": {
    "illustration": "./img/component-illustrations/options-menu.png",
    "summary": "An <b>options menu</b> contains a set of optional settings."
  },
  "overflow-menu": {
    "illustration": "./img/component-illustrations/overflow-menu.png",
    "summary": "An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."
  },
  "page": {
    "illustration": "./img/component-illustrations/page.png",
    "summary": "A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."
  },
  "pagination": {
    "illustration": "./img/component-illustrations/pagination.png",
    "summary": "A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."
  },
  "panel": {
    "illustration": "./img/component-illustrations/panel.png",
    "summary": "A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."
  },
  "password-generator": {
    "illustration": "./img/component-illustrations/password-generator.png",
    "summary": "This demo demonstrates how to create an input field that generates unique passwords."
  },
  "password-strength": {
    "illustration": "./img/component-illustrations/password-strength.png",
    "summary": "This demo demonstrates how to validate and display feedback about password strength."
  },
  "popover": {
    "illustration": "./img/component-illustrations/popover.png",
    "summary": "A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."
  },
  "progress-stepper": {
    "illustration": "./img/component-illustrations/progress-stepper.png",
    "summary": "A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."
  },
  "progress": {
    "illustration": "./img/component-illustrations/progress.png",
    "summary": "A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."
  },
  "radio": {
    "illustration": "./img/component-illustrations/radio.png",
    "summary": "A <b>radio</b> is a button that's used to present users with mutually exclusive choices."
  },
  "search-input": {
    "illustration": "./img/component-illustrations/search-input.png",
    "summary": "A <b>search input</b> is a type of input field that can be used to search, find, or filter."
  },
  "select": {
    "illustration": "./img/component-illustrations/select.png",
    "summary": "A <b>select</b> component is a menu that enables users to select 1 or more items from a list."
  },
  "sidebar": {
    "illustration": "./img/component-illustrations/sidebar.png",
    "summary": "A <b>sidebar</b> is a panel that splits content into a secondary area within a page."
  },
  "simple-list": {
    "illustration": "./img/component-illustrations/simple-list.png",
    "summary": "A <b>simple list</b> displays selectable items within a page."
  },
  "skeleton": {
    "illustration": "./img/component-illustrations/skeleton.png",
    "summary": "A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."
  },
  "skip-to-content": {
    "illustration": "./img/component-illustrations/skip-to-content.png",
    "summary": "A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"
  },
  "slider": {
    "illustration": "./img/component-illustrations/slider.png",
    "summary": "A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."
  },
  "spinner": {
    "illustration": "./img/component-illustrations/spinner.png",
    "summary": "A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."
  },
  "switch": {
    "illustration": "./img/component-illustrations/switch.png",
    "summary": "A <b>switch</b> is a control that toggles the state of a setting between on and off."
  },
  "tab-content": {
    "illustration": "./img/component-illustrations/tab-content.png",
    "summary": "A <b>tab content</b> component is used to contain content within a tab."
  },
  "table": {
    "illustration": "./img/component-illustrations/table.png",
    "summary": "A <b>table</b> displays large data sets in a simple grid with column headers."
  },
  "tabs": {
    "illustration": "./img/component-illustrations/tabs.png",
    "summary": "<b>Tabs</b> group similar content within sub-views of a page."
  },
  "text-area": {
    "illustration": "./img/component-illustrations/text-area.png",
    "summary": "Most commonly used in  <Link to='/components/forms/form'>forms</Link>, a <b>text area</b> allows users to enter a longer paragraph of text."
  },
  "text-input-group": {
    "illustration": "./img/component-illustrations/text-input-group.png",
    "summary": "A <b>text input group</b> is a more custom, flexible, and composable version of a <Link to='/components/forms/text-input'>text input</Link> that includes elements like icons and buttons."
  },
  "text-input": {
    "illustration": "./img/component-illustrations/text-input.png",
    "summary": "A <b>text input</b> components allows users to input short text."
  },
  "tile": {
    "illustration": "./img/component-illustrations/tile.png",
    "summary": "A <b>tile</b> is a container that allows users to select a static option."
  },
  "time-picker": {
    "illustration": "./img/component-illustrations/time-picker.png",
    "summary": "A <b>time picker</b> component allows users to select a time from a list of options."
  },
  "timestamp": {
    "illustration": "./img/component-illustrations/timestamp.png",
    "summary": "A <b>timestamp</b> is a consistently formatted visual that displays date and time values."
  },
  "title": {
    "illustration": "./img/component-illustrations/title.png",
    "summary": "A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."
  },
  "toggle-group": {
    "illustration": "./img/component-illustrations/toggle-group.png",
    "summary": "A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."
  },
  "toolbar": {
    "illustration": "./img/component-illustrations/toolbar.png",
    "summary": "A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."
  },
  "tooltip": {
    "illustration": "./img/component-illustrations/tooltip.png",
    "summary": "A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."
  },
  "tree-view": {
    "illustration": "./img/component-illustrations/tree-view.png",
    "summary": "A <b>tree view</b> is a structure that displays data in a hierarchical view."
  },
  "truncate": {
    "illustration": "./img/component-illustrations/truncate.png",
    "summary": "A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."
  },
  "wizard": {
    "illustration": "./img/component-illustrations/wizard.png",
    "summary": "A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."
  }
}