> For the complete documentation index, see [llms.txt](https://design.mirakl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.mirakl.com/design/components.md).

# Components

## Actions

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Action menu</strong></td><td>An action menu shows a list of items presenting the user with actions that can have an immediate effect, or a redirection to another section of the Mirakl platform.</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fe1nDpB5VVdCRpg3IEjza%2FActionMenu%20Card.png?alt=media&amp;token=ba41808b-1e76-46ec-9a69-6af642c6457b">ActionMenu Card.png</a></td><td><a href="/design/components/actions/action-menu.md">Action menu</a></td></tr><tr><td><strong>Buttons</strong></td><td>A central component to guide users through their experience in the platform. They trigger actions and let users know what their options are.</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FHxLEbD3iVWs20gO0RCbD%2FButtons%20Card.png?alt=media&amp;token=34f9ba85-1dc7-4489-8871-d38fff89b342">Buttons Card.png</a></td><td><a href="/design/components/actions/buttons.md">Buttons</a></td></tr><tr><td><strong>Button group</strong></td><td>Button group is used to gather multiple actions.</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FRTfTlkkMpLbrMAxz8jiG%2FButtonGroup%20Card.png?alt=media&amp;token=0ac3ac2b-fcd9-4633-9aae-fae469ea60fd">ButtonGroup Card.png</a></td><td><a href="/design/components/actions/button-group.md">Button group</a></td></tr><tr><td><strong>File download</strong></td><td>This component allows users to download a file from Mirakl.</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FwXHN5MahYj2KwEmQQsSk%2FFile%20Download%20Card.png?alt=media&amp;token=bfad3288-3a2d-49a4-86f2-46ea3765d9c2">File Download Card.png</a></td><td><a href="/design/components/actions/file-download.md">File download</a></td></tr><tr><td><strong>Save bar</strong></td><td>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</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F90MppiOZ3o94CdXqNxRj%2FSavebar%20Card.png?alt=media&amp;token=35c8108a-8c77-44c1-946e-020713e7ec66">Savebar Card.png</a></td><td><a href="/design/components/actions/save-bar.md">Save bar</a></td></tr><tr><td><strong>Tasklist</strong></td><td>Tasklists are designed to display multiple tasks users will have to complete to finalize a complex process (e.g. store or profile creation).</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FWxMwFHvyxIpC7qvX5gR8%2FTasklist%20Card.png?alt=media&amp;token=6eb76626-bfcf-4c88-a3e6-8854a6c2c7cf">Tasklist Card.png</a></td><td><a href="/design/components/actions/tasklist.md">Tasklist</a></td></tr><tr><td><strong>Toolbar</strong></td><td>Toolbar allows users to filter and manage the display of the content a page</td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FyUDsYIZdANNpMJxRHXhN%2FToolbar%20Card.png?alt=media&amp;token=e5432d22-98e7-4ce1-b699-23d5c3cd78c7">Toolbar Card.png</a></td><td><a href="/design/components/actions/contextual-toolbar.md">Contextual Toolbar</a></td></tr></tbody></table>

***

## Datalist

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Datalist</strong></td><td>Datalists display objects of the same type in a lean and clear way.</td><td></td><td><a href="/design/components/datalist.md">Datalist</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FCRzyIsNIMG1qviKmornN%2FDatalist%20Card.png?alt=media&amp;token=21ca230f-119f-4d2b-831d-57ba7b8ba7f8">Datalist Card.png</a></td></tr></tbody></table>

***

## Datatable

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Datatable</strong></td><td>Datatables are made to display information in a consistent way made to compare data easily.</td><td></td><td><a href="/design/components/datatable.md">Datatable</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FAkuc2i38iMfOATzlo3ZO%2FDatatable%20Card.png?alt=media&amp;token=a44e922b-05cb-4561-8589-ce8aaeb4ce18">Datatable Card.png</a></td></tr></tbody></table>

***

## Feedback

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Alert</strong></td><td>Alerts highlight important information that needs to be communicated quickly to the user.</td><td></td><td><a href="/design/components/feedback/alerts.md">Alerts</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F1daoQjkxoIBmFk9hJSo9%2FAlerts%20Card.png?alt=media&amp;token=c1868945-55db-4145-85da-152015068d1e">Alerts Card.png</a></td></tr><tr><td><strong>Activity loader</strong></td><td>A component that indicates to users that we're processing their data or that a page is loading.</td><td></td><td><a href="/design/components/feedback/activity-loader.md">Activity Loader</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FK4fbdXjy3FcswFhfxdnZ%2FActivity%20Loader%20Card.png?alt=media&amp;token=fbaf4a40-0cd2-4fc4-be7e-44cfd32f7644">Activity Loader Card.png</a></td></tr><tr><td><strong>Badge</strong></td><td>Badges are used to show the status of an object or the result of an action that has been performed.</td><td></td><td><a href="/design/components/feedback/badge-status.md">Badge (status)</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FPIhM4LzZbF49wQHSOKgX%2FBadges%20Card.png?alt=media&amp;token=dd2cdce7-2e56-4712-a7c0-0472ed862754">Badges Card.png</a></td></tr><tr><td><strong>Empty state</strong></td><td>Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space.</td><td></td><td><a href="/design/components/feedback/empty-state.md">Empty state</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FfFUSYrxf3S3Ru5TjoY55%2FEmpty%20State%20Card.png?alt=media&amp;token=318729f1-db37-4b42-a831-e93a74c88520">Empty State Card.png</a></td></tr><tr><td><strong>Snackbar</strong></td><td>A discreet but efficient way to convey feedback on the outcome of an action.</td><td></td><td><a href="/design/components/feedback/snackbar.md">Snackbar</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FyTd0G3fWC7cJBNVIIpkT%2FSnackbar%20Card.png?alt=media&amp;token=e878b492-3467-4567-b5d2-aff9a21b20ba">Snackbar Card.png</a></td></tr></tbody></table>

***

## Forms

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Fields</strong></td><td>Fields component allow users to enter a text. They will provide answers we cannot foresee unlike Pickers component.</td><td></td><td><a href="/design/components/form/fields.md">Fields</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FPcIwcdzDDH7oiybEFvZE%2FFields%20Card.png?alt=media&amp;token=57f3cad3-de55-44ad-af80-943f2c89ff25">Fields Card.png</a></td></tr><tr><td><strong>Pickers</strong></td><td>Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu.</td><td></td><td><a href="/design/components/form/pickers.md">Pickers</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FTSOpkdZWunMeDWAQmwfP%2FPickers%20Card.png?alt=media&amp;token=08390d53-94a4-491b-8b7c-88115d97cbf6">Pickers Card.png</a></td></tr><tr><td><strong>Selection controls</strong></td><td>Selection controls are specific components to let users control different kinds of options, settings, or situations.</td><td></td><td><a href="/design/components/form/selection-controls.md">Selection controls</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F6vGodjxkq9wHtpkdKL9C%2FSelection%20controls%20Card.png?alt=media&amp;token=668a4f08-1cfa-4640-8ead-154c3bf0f03f">Selection controls Card.png</a></td></tr><tr><td><strong>Tree</strong></td><td>A tree helps showcase data in a hierarchical way, either for selection or navigation.</td><td></td><td><a href="/design/components/form/tree.md">Tree</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fke8WImOUq8wj6k11hKFp%2FTree%20Card.png?alt=media&amp;token=3dc4bc9d-0fd4-400c-97e0-11ab9cc1e718">Tree Card.png</a></td></tr></tbody></table>

***

## Images

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Illustrations</strong></td><td>Our illustrations have a visual and emotional impact in order to bring optimism, friendliness and engagement to users.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FiJzTvzqC5mRYLUicct9o%2FIllustrations%20Card.png?alt=media&amp;token=b6be6a14-0f3a-414f-9bc6-ff3bd092c917">Illustrations Card.png</a></td><td><a href="/design/components/images/illustrations.md">Illustrations</a></td></tr><tr><td><strong>Icons</strong></td><td>Icons provide visual help to users and illustrate key concepts.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FvYOFUHDkuBxUrBYbA1af%2FIcon%20Card.png?alt=media&amp;token=17b62f47-ce3b-4652-868a-ce7f6873c121">Icon Card.png</a></td><td><a href="/design/components/images/icons.md">Icons</a></td></tr><tr><td><strong>Media</strong></td><td>Media component is used to display images.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fb9XpewesePSGSAbR25mK%2FMedia%20Card.png?alt=media&amp;token=28c9058e-4c62-4078-bd01-7994ec2bbd87">Media Card.png</a></td><td><a href="/design/components/images/media.md">Media</a></td></tr></tbody></table>

***

## Navigation

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Hyperlink</strong></td><td>Hyperlinks are anchor tags users can interact with to navigate to other pages.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FrTDUh6smDlPZblHqIBbL%2FHyperlink%20Card.png?alt=media&amp;token=f6ba351b-73d8-4f74-b9ff-4a6b3a521c47">Hyperlink Card.png</a></td><td><a href="/design/components/navigation/hyperlink.md">Hyperlink</a></td></tr><tr><td><strong>Page title</strong></td><td>The first thing users see before interacting with the page. It provides the core information users need when viewing the page.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FIi9meKJi8Ji4y0vMrhDV%2FPage%20Title%20Card.png?alt=media&amp;token=cb3f52bc-b684-4fae-a609-0fc54c80cecc">Page Title Card.png</a></td><td><a href="/design/components/navigation/page-title.md">Page title</a></td></tr><tr><td><strong>Sidebar</strong></td><td>Our sidebar menu displays the primary navigation and provides access to the main sections of the platform.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fk0EUr9g43oliLwpGMTrw%2FSidebar%20Card.png?alt=media&amp;token=b15bfbbc-25f4-4d82-a966-7737a829084a">Sidebar Card.png</a></td><td><a href="/design/components/navigation/sidebar.md">Sidebar</a></td></tr><tr><td><strong>Top bar</strong></td><td>Top bar allows operators and sellers to switch between our different tools and access their profile.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FzUD29na6xHinZjOpIgir%2FTopbar%20Card.png?alt=media&amp;token=b51cacc1-fd3f-4df2-89ab-0944a2a6f51c">Topbar Card.png</a></td><td><a href="/design/components/navigation/top-bar.md">Top bar</a></td></tr></tbody></table>

***

## Overlays

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Modal</strong></td><td>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.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FWQAXfZEOmFoQDXYvrzyQ%2FModal%20Card.png?alt=media&amp;token=e96fa021-11c7-4fb8-901e-195f6c71f405">Modal Card.png</a></td><td><a href="/design/components/overlays/modal.md">Modal</a></td></tr><tr><td><strong>Popover</strong></td><td>An overlay for larger amounts of data.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FVadXgQ4G1R7okwCbce9x%2FPopover%20Card.png?alt=media&amp;token=5b82dd93-a9e7-45a1-b4e6-8d5cabe40bc6">Popover Card.png</a></td><td><a href="/design/components/overlays/popover.md">Popover</a></td></tr><tr><td><strong>Tooltip</strong></td><td>An overlay for small amounts of data.</td><td></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F38aWTSjyefg3XaW7hfI2%2FTooltip%20Card.png?alt=media&amp;token=ef8c5b7d-5396-4d3e-9635-7d8b59ab1ee0">Tooltip Card.png</a></td><td><a href="/design/components/overlays/tooltip.md">Tooltip</a></td></tr></tbody></table>

***

## Structure

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Global layout</strong></td><td>Global layout is the way we arrange elements on a page to create a consistent experience for the user.</td><td></td><td><a href="/design/components/structure/global-layout.md">Global layout</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FWuIwTAKGFik1nlSGwVpG%2FGlobal%20Layout%20Card.png?alt=media&amp;token=214f346c-c566-4dd8-a203-3a82a33cde88">Global Layout Card.png</a></td></tr><tr><td><strong>Panel</strong></td><td>The key component to structure content on Mirakl.</td><td></td><td><a href="/design/components/structure/panel.md">Panel</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FcdNSKLXwO4R958dmTDSs%2FPanel%20Card.png?alt=media&amp;token=2b062259-aa14-439c-8683-3dd4d6f83e51">Panel Card.png</a></td></tr><tr><td><strong>Card</strong></td><td>Cards are a great way to add some hierarchy and organization to a panel.</td><td></td><td><a href="/design/components/structure/card.md">Card</a></td><td><a href="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FX9e3ihjCNkb9Iw324usG%2FCard%20Card.png?alt=media&amp;token=9ab2f54c-1706-4f9a-8312-d4dd06b7f599">Card Card.png</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://design.mirakl.com/design/components.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.