# Design

- [Components](/design/components.md)
- [Actions](/design/components/actions.md): this are all the available actionable components
- [Action menu](/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](/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](/design/components/actions/button-group.md): Button group is used to gather multiple actions.
- [File download](/design/components/actions/file-download.md): This component allows users to download a file from Mirakl.
- [Save bar](/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](/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](/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](/design/components/datalist.md): Datalists display objects of the same type in a lean and clear way.
- [Datatable](/design/components/datatable.md): Datatables are designed to present information consistently, facilitating easy data comparison
- [Feedback](/design/components/feedback.md)
- [Alerts](/design/components/feedback/alerts.md): Alerts highlight important information that needs to be communicated quickly to the user.
- [Activity Loader](/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)](/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](/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](/design/components/feedback/snackbar.md): A discreet but efficient way to convey feedback on the outcome of an action.
- [Form](/design/components/form.md): A page that has interactive controls with which a user can submit information to a web server.
- [Fields](/design/components/form/fields.md): Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers.
- [Pickers](/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](/design/components/form/selection-controls.md): Selection controls are specific components to let users control different kinds of options, settings, or situations.
- [Tree](/design/components/form/tree.md): A tree helps showcase data in a hierarchical way, either for selection or navigation.
- [Images](/design/components/images.md)
- [Illustrations](/design/components/images/illustrations.md): Our illustrations have a visual and emotional impact in order to bring optimism, friendliness and engagement to users.
- [Icons](/design/components/images/icons.md): Icons provide visual help to users and illustrate key concepts.
- [Media](/design/components/images/media.md): The Media component is designed to display images or videos, enhancing interfaces by providing graphic or video representations.
- [Navigation](/design/components/navigation.md)
- [Hyperlink](/design/components/navigation/hyperlink.md): Hyperlinks are anchor tags users can interact with to navigate to other pages.
- [Page title](/design/components/navigation/page-title.md): Page title provides the core information users need when viewing the page.
- [Sidebar](/design/components/navigation/sidebar.md): Sidebar menu is the primary navigation. It provides access to the main sections of the platform.
- [Top bar](/design/components/navigation/top-bar.md): Top bar allows operators and sellers to switch between our different tools and access their profile.
- [Overlays](/design/components/overlays.md)
- [Modal](/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](/design/components/overlays/popover.md): An overlay for larger amounts of data.
- [Tooltip](/design/components/overlays/tooltip.md): An overlay for small amounts of data.
- [Side Drawer](/design/components/overlays/side-drawer.md): A drawer is a panel that slides in from the right side of the viewport.
- [Structure](/design/components/structure.md)
- [Global layout](/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](/design/components/structure/panel.md): The key component to structure content on Mirakl.
- [Activable Panel](/design/components/structure/panel/activable-panel.md): A Panel variant with dynamic display control to bring flexibility in the interface.
- [Clickable Panel](/design/components/structure/panel/clickable-panel.md): Clickable panels are used to display information in a clickable zone.
- [Expandable Panel](/design/components/structure/panel/expandable-panel.md)
- [Panel tabs](/design/components/structure/panel/panel-tabs.md): Panel tabs display related but specific content within the same panel, filtered views, for example.
- [Totalizer Panel](/design/components/structure/panel/totalizer-panel.md): A component to present important figures to the user.
- [Card](/design/components/structure/card.md): Cards are a great way to add some hierarchy and organization to a panel.
- [Patterns](/design/patterns.md)
- [Advanced selection](/design/patterns/advanced-selection.md): Allows users to make an informed selection of items with an editable restitution of data.
- [Configure options](/design/patterns/configure-options.md): Simplify user choices in configuring their settings.
- [Deletion](/design/patterns/deletion.md): Guidelines for implementing safe, clear, and intentional deletion workflows that protect users from unintended data loss.
- [Displaying data](/design/patterns/displaying-data.md): Datalist or datatable, that is the question.
- [Displaying history](/design/patterns/displaying-history.md): Tracking changes and progression over time.
- [Errors](/design/patterns/errors.md): Allows users to fix problems themselves through thoughtful messaging.
- [Forms](/design/patterns/forms.md): Allow users to submit or edit information.
- [Form - Creation mode](/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](/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](/design/patterns/forms/form-in-a-modal.md): This page describes specific rules to form within a modal.
- [Error Management](/design/patterns/forms/error-management.md): How we guide users to handle mistakes on their forms
- [Stepper form](/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](/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](/design/patterns/loading.md): Reduces load time frustration and makes the page feel more responsive.
- [Progressive disclosure](/design/patterns/progressive-disclosure.md): Reveal gradually information to minimize cognitive load for a more intuitive design experience.