| Action menu | 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. | ActionMenu Card.png | action-menu |
| Buttons | A central component to guide users through their experience in the platform. They trigger actions and let users know what their options are. | Buttons Card.png | buttons |
| Button group | Button group is used to gather multiple actions. | ButtonGroup Card.png | button-group |
| File download | This component allows users to download a file from Mirakl. | File Download Card.png | file-download |
| Save bar | 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 | Savebar Card.png | save-bar |
| Tasklist | Tasklists are designed to display multiple tasks users will have to complete to finalize a complex process (e.g. store or profile creation). | Tasklist Card.png | tasklist |
| Toolbar | Toolbar allows users to filter and manage the display of the content a page | Toolbar Card.png | contextual-toolbar |
| Datalist | Datalists display objects of the same type in a lean and clear way. | datalist | Datalist Card.png |
| Datatable | Datatables are made to display information in a consistent way made to compare data easily. | datatable | Datatable Card.png |
| Alert | Alerts highlight important information that needs to be communicated quickly to the user. | alerts | Alerts Card.png | |
| Activity loader | A component that indicates to users that we're processing their data or that a page is loading. | activity-loader | Activity Loader Card.png | |
| Badge | Badges are used to show the status of an object or the result of an action that has been performed. | badge-status | Badges Card.png | |
| Empty state | Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space. | empty-state | Empty State Card.png | |
| Snackbar | A discreet but efficient way to convey feedback on the outcome of an action. | snackbar | Snackbar Card.png |
| Fields | Fields component allow users to enter a text. They will provide answers we cannot foresee unlike Pickers component. | fields | Fields Card.png | |
| Pickers | Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu. | pickers | Pickers Card.png | |
| Selection controls | Selection controls are specific components to let users control different kinds of options, settings, or situations. | selection-controls | Selection controls Card.png | |
| Tree | A tree helps showcase data in a hierarchical way, either for selection or navigation. | tree | Tree Card.png |
| Illustrations | Our illustrations have a visual and emotional impact in order to bring optimism, friendliness and engagement to users. | Illustrations Card.png | illustrations | |
| Icons | Icons provide visual help to users and illustrate key concepts. | Icon Card.png | icons | |
| Media | Media component is used to display images. | Media Card.png | media |
| Hyperlink | Hyperlinks are anchor tags users can interact with to navigate to other pages. | Hyperlink Card.png | hyperlink | |
| Page title | The first thing users see before interacting with the page. It provides the core information users need when viewing the page. | Page Title Card.png | page-title | |
| Sidebar | Our sidebar menu displays the primary navigation and provides access to the main sections of the platform. | Sidebar Card.png | sidebar | |
| Top bar | Top bar allows operators and sellers to switch between our different tools and access their profile. | Topbar Card.png | top-bar |
| Modal | 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. | Modal Card.png | modal | |
| Popover | An overlay for larger amounts of data. | Popover Card.png | popover | |
| Tooltip | An overlay for small amounts of data. | Tooltip Card.png | tooltip |
| Global layout | Global layout is the way we arrange elements on a page to create a consistent experience for the user. | global-layout | Global Layout Card.png | |
| Panel | The key component to structure content on Mirakl. | panel | Panel Card.png | |
| Card | Cards are a great way to add some hierarchy and organization to a panel. | card | Card Card.png |
