# Design - [Components](https://design.mirakl.com/design/components.md) - [Actions](https://design.mirakl.com/design/components/actions.md): this are all the available actionable components - [Action menu](https://design.mirakl.com/design/components/actions/action-menu.md): The action menu displays a list of actions triggered by a button. These actions have an immediate effect or redirect to another section of the Mirakl platform. - [Buttons](https://design.mirakl.com/design/components/actions/buttons.md): A central component to guide users through their experience in the platform. They trigger actions and let users know what their options are. - [Button group](https://design.mirakl.com/design/components/actions/button-group.md): Button group is used to gather multiple actions. - [File download](https://design.mirakl.com/design/components/actions/file-download.md): This component allows users to download a file from Mirakl. - [Save bar](https://design.mirakl.com/design/components/actions/save-bar.md): A Save Bar is an action bar that sticks to the bottom of the viewport as you scroll. It contains actions related to a page and allow users to scroll without loosing visibility on the different actions - [Tasklist](https://design.mirakl.com/design/components/actions/tasklist.md): Task lists are created to present users with a series of tasks they need to accomplish in order to complete a more intricate process, such as creating a store or profile. - [Contextual Toolbar](https://design.mirakl.com/design/components/actions/contextual-toolbar.md): Convert a single page into a dynamic interface by granting users efficient control for visualizing and managing displayed data. - [Datalist](https://design.mirakl.com/design/components/datalist.md): Datalists display objects of the same type in a lean and clear way. - [Datatable](https://design.mirakl.com/design/components/datatable.md): Datatables are designed to present information consistently, facilitating easy data comparison - [Feedback](https://design.mirakl.com/design/components/feedback.md) - [Alerts](https://design.mirakl.com/design/components/feedback/alerts.md): Alerts highlight important information that needs to be communicated quickly to the user. - [Activity Loader](https://design.mirakl.com/design/components/feedback/activity-loader.md): A component that indicates to users that we're processing their data or that a page is loading. - [Badge (status)](https://design.mirakl.com/design/components/feedback/badge-status.md): Badges are used to show the status of an object or the result of an action that has been performed. - [Empty state](https://design.mirakl.com/design/components/feedback/empty-state.md): Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space. - [Snackbar](https://design.mirakl.com/design/components/feedback/snackbar.md): A discreet but efficient way to convey feedback on the outcome of an action. - [Form](https://design.mirakl.com/design/components/form.md): A page that has interactive controls with which a user can submit information to a web server. - [Fields](https://design.mirakl.com/design/components/form/fields.md): Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers. - [Pickers](https://design.mirakl.com/design/components/form/pickers.md): Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu. - [Selection controls](https://design.mirakl.com/design/components/form/selection-controls.md): Selection controls are specific components to let users control different kinds of options, settings, or situations. - [Tree](https://design.mirakl.com/design/components/form/tree.md): A tree helps showcase data in a hierarchical way, either for selection or navigation. - [Images](https://design.mirakl.com/design/components/images.md) - [Illustrations](https://design.mirakl.com/design/components/images/illustrations.md): Our illustrations have a visual and emotional impact in order to bring optimism, friendliness and engagement to users. - [Icons](https://design.mirakl.com/design/components/images/icons.md): Icons provide visual help to users and illustrate key concepts. - [Media](https://design.mirakl.com/design/components/images/media.md): The Media component is designed to display images or videos, enhancing interfaces by providing graphic or video representations. - [Navigation](https://design.mirakl.com/design/components/navigation.md) - [Hyperlink](https://design.mirakl.com/design/components/navigation/hyperlink.md): Hyperlinks are anchor tags users can interact with to navigate to other pages. - [Page title](https://design.mirakl.com/design/components/navigation/page-title.md): Page title provides the core information users need when viewing the page. - [Sidebar](https://design.mirakl.com/design/components/navigation/sidebar.md): Sidebar menu is the primary navigation. It provides access to the main sections of the platform. - [Top bar](https://design.mirakl.com/design/components/navigation/top-bar.md): Top bar allows operators and sellers to switch between our different tools and access their profile. - [Overlays](https://design.mirakl.com/design/components/overlays.md) - [Modal](https://design.mirakl.com/design/components/overlays/modal.md): A modal displays content that requires user interaction in a layer that shows up on top of the current context. Modals block access to the rest of the page and force user interaction. - [Popover](https://design.mirakl.com/design/components/overlays/popover.md): An overlay for larger amounts of data. - [Tooltip](https://design.mirakl.com/design/components/overlays/tooltip.md): An overlay for small amounts of data. - [Side Drawer](https://design.mirakl.com/design/components/overlays/side-drawer.md): A drawer is a panel that slides in from the right side of the viewport. - [Structure](https://design.mirakl.com/design/components/structure.md) - [Global layout](https://design.mirakl.com/design/components/structure/global-layout.md): Global layout is the way we arrange elements on a page to create a consistent experience for the user. - [Panel](https://design.mirakl.com/design/components/structure/panel.md): The key component to structure content on Mirakl. - [Activable Panel](https://design.mirakl.com/design/components/structure/panel/activable-panel.md): A Panel variant with dynamic display control to bring flexibility in the interface. - [Clickable Panel](https://design.mirakl.com/design/components/structure/panel/clickable-panel.md): Clickable panels are used to display information in a clickable zone. - [Expandable Panel](https://design.mirakl.com/design/components/structure/panel/expandable-panel.md) - [Panel tabs](https://design.mirakl.com/design/components/structure/panel/panel-tabs.md): Panel tabs display related but specific content within the same panel, filtered views, for example. - [Totalizer Panel](https://design.mirakl.com/design/components/structure/panel/totalizer-panel.md): A component to present important figures to the user. - [Card](https://design.mirakl.com/design/components/structure/card.md): Cards are a great way to add some hierarchy and organization to a panel. - [Patterns](https://design.mirakl.com/design/patterns.md) - [Advanced selection](https://design.mirakl.com/design/patterns/advanced-selection.md): Allows users to make an informed selection of items with an editable restitution of data. - [Configure options](https://design.mirakl.com/design/patterns/configure-options.md): Simplify user choices in configuring their settings. - [Deletion](https://design.mirakl.com/design/patterns/deletion.md): Guidelines for implementing safe, clear, and intentional deletion workflows that protect users from unintended data loss. - [Displaying data](https://design.mirakl.com/design/patterns/displaying-data.md): Datalist or datatable, that is the question. - [Displaying history](https://design.mirakl.com/design/patterns/displaying-history.md): Tracking changes and progression over time. - [Errors](https://design.mirakl.com/design/patterns/errors.md): Allows users to fix problems themselves through thoughtful messaging. - [Forms](https://design.mirakl.com/design/patterns/forms.md): Allow users to submit or edit information. - [Form - Creation mode](https://design.mirakl.com/design/patterns/forms/form-creation-mode.md): A creation form is when users create an object or add an element that did not exist before. - [Form - Edition mode](https://design.mirakl.com/design/patterns/forms/form-edition-mode.md): An Edition form is when users edit an object/edit an element that already existed. - [Form - In a modal](https://design.mirakl.com/design/patterns/forms/form-in-a-modal.md): This page describes specific rules to form within a modal. - [Error Management](https://design.mirakl.com/design/patterns/forms/error-management.md): How we guide users to handle mistakes on their forms - [Stepper form](https://design.mirakl.com/design/patterns/forms/stepper-form.md): Stepper is designed to help users fill a complex or long form. By deviding forms into smaller steps, we reduce users mental load and clarifies information structure. - [Onboarding form](https://design.mirakl.com/design/patterns/forms/onboarding-form.md): The onboarding stepper is dedicated to onboarding experiences for new users. Its simple design helps users provide key information quickly and seamlessly. - [Loading](https://design.mirakl.com/design/patterns/loading.md): Reduces load time frustration and makes the page feel more responsive. - [Progressive disclosure](https://design.mirakl.com/design/patterns/progressive-disclosure.md): Reveal gradually information to minimize cognitive load for a more intuitive design experience. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://design.mirakl.com/design.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.