Tola UI components examples

Tola

A read-only field displaying an email address with a copy icon, accompanied by helper text below.

• Click to copy

Tola

A small confirmation dialog asking the user to confirm the deletion of a policy, with Cancel and OK buttons.

• Notification Toast

Tola

A form section containing a select input for choosing an approver and a primary button to add the policy.

• Input tag

Tola

An open dropdown menu for selecting an approver. The input field shows a selected user as a pill, and the open menu below lists available options with a checkmark indicating the current selection.

• Input multi-select

Tola

A color picker component allowing users to select a brand color. It features a saturation/lightness area, a hue slider, and a hex code input field.

• Color picker

Tola

A form section allowing users to choose between requesting payment details via email or entering them manually. It includes a selected card for 'Request details', an email input field, and a toggle to add a personal message.

• Tabs

Tola

A toggle switch component within a bordered card, featuring an icon, a primary label, and a secondary description text. The toggle is currently in the active (on) state.

• Toggle/Switch

Tola

A card containing a toggle switch to enable automatic invoice reminders, along with a status message and a link to set them up.

• Toggle/Switch

Tola

A horizontal row of color swatches allowing the user to select a brand color. The first swatch is currently selected, indicated by a black border.

• Theme settings

Tola

An alert card notifying the user of a potential duplicate bill, including the creator's name and timestamp.

• Alert

Tola

A success toast notification confirming that a bill has been duplicated, with a brief explanatory message and a close button.

• Notification Toast

Tola

A table row or list item showing a payment entry with missing information. It includes an icon, vendor name, invoice number, date, a status badge indicating missing payment info, and the amount.

• Table