Mercury UI components examples

Mercury

A dark-themed toast notification displaying an error message with a retry action.

• Notification Toast

Mercury

A read-only field displaying a generated API token with a tooltip indicating it can be clicked to copy. A warning message above explains that the token will only be shown once.

• Click to copy

Mercury

A data table displaying a list of API tokens with columns for Nickname, Permissions, Last used, Created by, Created, and Whitelisted IPs. Each row includes a more options menu icon.

• Table

Mercury

A button to create a new API token, featuring a circular plus icon with a dashed border next to the text label.

• Button

Mercury

A calendar component for selecting a specific date. It includes a header with the selected date, current month and year, and navigation arrows. The calendar grid displays days of the week and dates, with the selected date highlighted.

• Datepicker

Mercury

An expanded dropdown menu for selecting a country code, featuring a search input at the top and a scrollable list of countries with flags and calling codes.

• Input phone number

Mercury

A phone number input field with a country code selector.

• Input phone number

Mercury

A rounded square avatar containing a single initial, accompanied by a text label to its right.

• Avatar

Mercury

A row containing a dropdown to select the limit type and a number input for the monthly spending limit.

• Input amount

Mercury

A radio group allowing the user to select between Credit and Debit card types, styled as large selectable cards.

• Checkbox & radio

Mercury

A horizontal row showing two overlapping circular avatars with initials, followed by descriptive text indicating the number of users.

• Avatar

Mercury

A standard select input field displaying a selected value with a dropdown arrow.

• Input select