Overview

Actions

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.

Buttons

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

Button group is used to gather multiple actions.

File download

This component allows users to download a file from Mirakl.

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

Tasklist

Tasklists are designed to display multiple tasks users will have to complete to finalize a complex process (e.g. store or profile creation).

Toolbar

Toolbar allows users to filter and manage the display of the content a page

Datalist

Datalist

Datalists display objects of the same type in a lean and clear way.

Datatable

Datatable

Datatables are made to display information in a consistent way made to compare data easily.

Feedback

Alert

Alerts highlight important information that needs to be communicated quickly to the user.

Activity loader

A component that indicates to users that we're processing their data or that a page is loading.

Badge

Badges are used to show the status of an object or the result of an action that has been performed.

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.

Snackbar

A discreet but efficient way to convey feedback on the outcome of an action.

Forms

Fields

Fields component allow users to enter a text. They will provide answers we cannot foresee unlike Pickers component.

Pickers

Selection controls

Selection controls are specific components to let users control different kinds of options, settings, or situations.

Tree

A tree helps showcase data in a hierarchical way, either for selection or navigation.

Images

Illustrations

Icons

Media

Media component is used to display images.

Hyperlink

Hyperlinks are anchor tags users can interact with to navigate to other pages.

Page title

The first thing users see before interacting with the page. It provides the core information users need when viewing the page.

Sidebar

Our brand new navigation.

Top bar

Overlays

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.