Components

upSWOT Customization parameters

Accordion

Accordion is a collapsible content container that allows users to reveal or hide additional information by clicking on its headers. It is helpful for organizing and presenting content compactly, providing a structured layout for a better user experience.

Base

Property

Variable

Description

Font--us-accordion-base-fontChanges the font style of the Accordion title.
Font color--us-accordion-base-color
Icon color--us-accordion-base-icon-color
Vertical paddings--us-accordion-base-v-padding
Horizontal paddings--us-accordion-base-h-padding
Border--us-accordion-base-borderThis variable includes both color and style.
Border width--us-accordion-base-border-width
Border radius--us-accordion-base-border-radius

Normal

Property

Variable

Description

Background--us-accordion-normal-bg-color

Hover

Property

Variable

Icon color--us-accordion-hover-icon-color
Background--us-accordion-hover-bg-color

Pressed

Property

Variable

Background--us-accordion-pressed-bg-color

Alert

The Alert component displays contextual messages to users, conveying important information or feedback. Each Alert variant may include an optional link after the text inside the Alert. This link can lead to related content or further actions to assist users in resolving the situation or taking appropriate steps.

Alerts are typically displayed at the top or bottom of a page or within specific sections, ensuring their visibility and impact on user interactions.

Base

These are base variables for all Badge types that are mentioned below.

Property

Variable

Vertical padding--us-alert-base-v-padding
Horizontal padding--us-alert-base-h-padding
Border radius--us-alert-base-border-radius
Border width--alert-base-border-width

Info

It provides informational messages to users, offering additional context or guidance without indicating any critical action.

Property

Variable

Background color--us-alert-info-bg-color
Left border--us-alert-info-border-left
Icon color--us-alert-info-icon-color

Success

It indicates a successful completion or confirmation of an action, providing positive feedback to users.

Property

Variable

Background color--us-alert-success-bg-color
Left border--us-alert-success-border-left
Icon color--us-alert-success-icon-color

Warning

It indicates potential issues or warnings that users should be aware of and helps draw attention to situations that require caution.

Property

Variable

Background color--us-alert-warning-bg-color
Left border--us-alert-warning-border-left
Icon color--us-alert-warning-icon-color

Danger

This variable indicates critical information about situations that may require additional attention or appropriate measures needed.

Property

Variable

Background color--us-alert-danger-bg-color
Left border--us-alert-danger-border-left
Icon color--us-alert-danger-icon-color

Badge and Trend

The Badge component is used to visually represent specific statuses, attributes, or dynamic information in a concise and eye-catching manner. Additionally, a Badge may include an optional icon that triggers a tooltip to provide supplementary explanations or further details about the dynamic data represented by the Badge.

General

These are base variables for all Badge types that are mentioned below.

Property

Variable name

Vertical padding--us-badge-general-v-padding
Horizontal padding--us-badge-general-h-padding
Border radius--us-badge-general-border-radius

Low Contrast

Low Contrast Badges suitable for amounts and gaps.

Neutral Status

It is a versatile option used to represent neutral states, providing subtle information without indicating any particular status (e.g. 0% gap).

Property

Variable name

Font color--us-badge-low-contrast-neutral-text-color
Background--us-badge-low-contrast-neutral-background-color
Border color--us-badge-low-contrast-neutral-border-color

Primary Status

It is used to emphasize important or primary attributes, actions, or states. It plays the role of an info badge.

Property

Variable name

Font color--us-badge-low-contrast-primary-text-color
Background--us-badge-low-contrast-primary-background-color
Border color--us-badge-low-contrast-primary-border-color

Secondary Status

It complements the Primary Badge, providing secondary information in the user interface.

Property

Variable name

Font color--us-badge-low-contrast-secondary-text-color
Background--us-badge-low-contrast-secondary-background-color
Border color--us-badge-low-contrast-secondary-border-color

Success Status

It indicates positive gaps or progress status.

Property

Variable name

Font color--us-badge-low-contrast-success-text-color
Background--us-badge-low-contrast-success-background-color
Border color--us-badge-low-contrast-success-border-color

Warning Status

It is used to indicate potential issues or warnings that require user attention.

Property

Variable name

Font color--us-badge-low-contrast-warning-text-color
Background--us-badge-low-contrast-warning-background-color
Border color--us-badge-low-contrast-warning-border-color

Error Status

It is used to highlight high-priority messages about negative gaps or amounts.

Property

Variable name

Font color--us-badge-low-contrast-error-text-color
Background--us-badge-low-contrast-error-background-color
Border color--us-badge-low-contrast-error-border-color

Moderate Contrast

Moderate Contrast Badges offer a balanced appearance for most regular usage scenarios. Always used as transaction tags.

Neutral Status

It is a versatile option used to represent neutral states, providing subtle information without indicating any particular status (e.g. Ignore payment).

Property

Variable name

Font color--us-badge-moderate-contrast-neutral-text-color
Background--us-badge-moderate-contrast-neutral-background-color
Border color--us-badge-moderate-contrast-neutral-border-color

Primary Status

It is always used to show a transaction frequency (e.g. Monthly, Weekly, Yearly).

Property

Variable name

Font color--us-badge-moderate-contrast-primary-text-color
Background--us-badge-moderate-contrast-primary-background-color
Border color--us-badge-moderate-contrast-primary-border-color

Secondary Status

It provides secondary information in the user interface (e.g. Boost score).

Property

Variable name

Font color--us-badge-moderate-contrast-secondary-text-color
Background--us-badge-moderate-contrast-secondary-background-color
Border color--us-badge-moderate-contrast-secondary-border-color

Success Status

It indicates successful completion, confirmation, or positive status and is used to provide positive feedback to the users.

Property

Variable name

Font color--us-badge-moderate-contrast-success-text-color
Background--us-badge-moderate-contrast-success-background-color
Border color--us-badge-moderate-contrast-success-border-color

Warning Status

It is used to indicate potential issues or warnings that require user attention. It helps draw attention to important notifications or actions.

Property

Variable name

Font color--us-badge-moderate-contrast-warning-text-color
Background--us-badge-moderate-contrast-warning-background-color
Border color--us-badge-moderate-contrast-warning-border-color

Error Status

It is used to highlight high-priority messages (e.g. Overdue payment).

Property

Variable name

Font color--us-badge-moderate-contrast-error-text-color
Background--us-badge-moderate-contrast-error-background-color
Border color--us-badge-moderate-contrast-error-border-color

High Contrast

High Contrast Badges provide a bold and prominent appearance, ideal for emphasizing critical information or strong visual impact. Usually displays important statuses (e.g. ‘Important’, ‘Attention’).

Neutral Status

It is a versatile option used to represent neutral states, providing subtle information without indicating any particular status.

Property

Variable name

Font color--us-badge-high-contrast-neutral-text-color
Background--us-badge-high-contrast-neutral-background-color
Border color--us-badge-high-contrast-neutral-border-color

Primary Status

It is always used to show the Info status of actionable insights.

Property

Variable name

Font color--us-badge-high-contrast-primary-text-color
Background--us-badge-high-contrast-primary-background-color
Border color--us-badge-high-contrast-primary-border-color

Secondary Status

Property

Variable name

Font color--us-badge-high-contrast-secondary-text-color
Background--us-badge-high-contrast-secondary-background-color
Border color--us-badge-high-contrast-secondary-border-color

Success Status

It is always used to show the Good status of actionable insights.

Property

Variable name

Font color--us-badge-high-contrast-success-text-color
Background--us-badge-high-contrast-success-background-color
Border color--us-badge-high-contrast-success-border-color

Warning Status

It is always used to show the Attention status of actionable insights.

Property

Variable name

Font color--us-badge-high-contrast-warning-text-color
Background--us-badge-high-contrast-warning-background-color
Border color--us-badge-high-contrast-warning-border-color

Error Status

It is always used to show the Important status of actionable insights.

Property

Variable name

Font color--us-badge-high-contrast-error-text-color
Background--us-badge-high-contrast-error-background-color
Border color--us-badge-high-contrast-error-border-color

Trend

The Trend component is used to visually represent directional changes or trends in data, showing either positive or negative values.

There are two main variations of the Trend element.

Trend up

It is represented by an arrow pointing upwards and indicates a positive value or an increasing trend in data. It signifies growth, improvement, or positive progress.

Property

Variable name

Font color--us-trend-up-text-color

Trend down

It is represented by an arrow pointing downwards and indicates a negative value or a decreasing trend in data. It signifies decline, reduction, or negative changes.

Property

Variable name

Font color--us-trend-down-text-color

Button and Icon-button

The Button component is a crucial interactive element used for initiating actions or operations within the user interface.

General

Property

Variable name

Description

Border radius--us-button-general-border-radiusThis variable is for all variants except "Icon-secondary".

Primary

The Primary Button is the main call-to-action element, intended to draw users' attention to important or primary actions. It has a distinctive appearance that stands out from other interface elements.

Property

Variable name

Description

Font--us-button-primary-fontThis variable is for all variants except
"Icon-secondary".
Font color--us-button-primary-text-color
Vertical padding--us-button-primary-v-paddingSame for all Primary button states.
Horizontal padding--us-button-primary-h-paddingSame for all Primary button states.
Border radius--us-button-primary-border-radiusSame for all Primary button states.
Background--us-button-primary-background
Icon color--us-button-primary-icon-color
Border width--us-button-primary-border-width
Border color--us-button-primary-border-color

Hover

Property

Variable name

Font color--us-button-primary-text-hover-color
Background--us-button-primary-background-hover
Icon color--us-button-primary-icon-hover-color
Border width--us-button-primary-border-hover-width
Border color--us-button-primary-border-hover-color

Focused

Property

Variable name

Font color--us-button-primary-text-focused-color
Background--us-button-primary-background-focused
Icon color--us-button-primary-icon-focused-color
Border width--us-button-primary-border-focused-width
Border color--us-button-primary-border-focused-color

Pressed

Property

Variable name

Font color--us-button-primary-text-pressed-color
Background--us-button-primary-background-pressed
Icon color--us-button-primary-icon-pressed-color
Border width--us-button-primary-border-pressed-width
Border color--us-button-primary-border-pressed-color

Disabled

Property

Variable name

Font color--us-button-primary-text-disabled-color
Background--us-button-primary-background-disabled
Icon color--us-button-primary-icon-disabled-color
Border width--us-button-primary-border-disabled-width
Border color--us-button-primary-border-disabled-color

Secondary

The Secondary Button is used for secondary actions or alternatives to the primary action. It has a visually subdued appearance, often presented alongside the primary button.

Property

Variable name

Description

Font--us-button-secondary-fontFont property includes both font weight
and font size. This variable is the same
for all Secondary button states.
Font color--us-button-secondary-text-color
Vertical padding--us-button-secondary-v-paddingSame for all Secondary button states.
Horizontal padding--us-button-secondary-h-paddingSame for all Secondary button states.
Border radius--us-button-secondary-border-radiusSame for all Secondary button states.
Background--us-button-secondary-background
Icon color--us-button-secondary-icon-color
Border width--us-button-secondary-border-width
Border color--us-button-secondary-border-color

Hover

Property

Variable name

Font color--us-button-secondary-text-hover-color
Background--us-button-secondary-background-hover
Icon color--us-button-secondary-icon-hover-color
Border width--us-button-secondary-border-hover-width
Border color--us-button-secondary-border-hover-color

Focused

Property

Variable name

Font color--us-button-secondary-text-focused-color
Background--us-button-secondary-background-focused
Icon color--us-button-secondary-icon-focused-color
Border width--us-button-secondary-border-focused-width
Border color--us-button-secondary-border-focused-color

Pressed

Property

Variable name

Font color--us-button-secondary-text-pressed-color
Background--us-button-secondary-background-pressed
Icon color--us-button-secondary-icon-pressed-color
Border width--us-button-secondary-border-pressed-width
Border color--us-button-secondary-border-pressed-color

Disabled

Property

Variable name

Font color--us-button-secondary-text-disabled-color
Background--us-button-secondary-background-disabled
Icon color--us-button-secondary-icon-disabled-color
Border width--us-button-secondary-border-disabled-width
Border color--us-button-secondary-border-disabled-color

Tertiary-action

The Tertiary Action Button is used to represent actions that are less frequently used or service actions (like edit). It complements the primary and secondary buttons and is typically used for less critical actions.

Property

Variable name

Description

Font--us-button-tertiary-action-fontFont property includes both font weight
and font size. This variable is the same
for all Tertiary-action button states.
Font color--us-button-tertiary-action-text-color
Vertical padding--us-button-tertiary-action-v-paddingSame for all Tertiary-action button states.
Horizontal padding--us-button-tertiary-action-h-paddingSame for all Tertiary-action button states.
Border radius--us-button-tertiary-action-border-radiusSame for all Tertiary-action button states.
Background--us-button-tertiary-action-background
Icon color--us-button-tertiary-action-icon-color
Border width--us-button-tertiary-action-border-width
Border color--us-button-tertiary-action-border-color

Hover

Property

Variable name

Font color--us-button-tertiary-action-text-hover-color
Background--us-button-tertiary-action-background-hover
Icon color--us-button-tertiary-action-icon-hover-color
Border width--us-button-tertiary-action-border-hover-width
Border color--us-button-tertiary-action-border-hover-color

Focused

Property

Variable name

Font color--us-button-tertiary-action-text-focused-color
Background--us-button-tertiary-action-background-focused
Icon color--us-button-tertiary-action-icon-focused-color
Border width--us-button-tertiary-action-border-focused-width
Border color--us-button-tertiary-action-border-focused-color

Pressed

Property

Variable name

Font color--us-button-tertiary-action-text-pressed-color
Background--us-button-tertiary-action-background-pressed
Icon color--us-button-tertiary-action-icon-pressed-color
Border width--us-button-tertiary-action-border-pressed-width
Border color--us-button-tertiary-action-border-pressed-color

Disabled

Property

Variable name

Font color--us-button-tertiary-action-text-disabled-color
Background--us-button-tertiary-action-background-disabled
Icon color--us-button-tertiary-action-icon-disabled-color
Border width--us-button-tertiary-action-border-disabled-width
Border color--us-button-tertiary-action-border-disabled-color

Tertiary-neutral

The Tertiary Neutral Button is used to represent actions that are less frequently used or service actions (like details).

Property

Variable name

Description

Font--us-button-tertiary-neutral-fontFont property includes both font weight
and font size. This variable is the same
for all Tertiary-neutral button states.
Font color--us-button-tertiary-neutral-text-color
Vertical padding--us-button-tertiary-neutral-v-paddingSame for all Tertiary-neutral button states.
Horizontal padding--us-button-tertiary-neutral-h-paddingSame for all Tertiary-neutral button states.
Border radius--us-button-tertiary-neutral-border-radiusSame for all Tertiary-neutral button states.
Background--us-button-tertiary-neutral-background
Icon color--us-button-tertiary-neutral-icon-color
Border width--us-button-tertiary-neutral-border-width
Border color--us-button-tertiary-neutral-border-color

Hover

Property

Variable name

Font color--us-button-tertiary-neutral-text-hover-color
Background--us-button-tertiary-neutral-background-hover
Icon color--us-button-tertiary-neutral-icon-hover-color
Border width--us-button-tertiary-neutral-border-hover-width
Border color--us-button-tertiary-neutral-border-hover-color

Focused

Property

Variable name

Font color--us-button-tertiary-neutral-text-focused-color
Background--us-button-tertiary-neutral-background-focused
Icon color--us-button-tertiary-neutral-icon-focused-color
Border width--us-button-tertiary-neutral-border-focused-width
Border color--us-button-tertiary-neutral-border-focused-color

Pressed

Property

Variable name

Font color--us-button-tertiary-neutral-text-pressed-color
Background--us-button-tertiary-neutral-background-pressed
Icon color--us-button-tertiary-neutral-icon-pressed-color
Border width--us-button-tertiary-neutral-border-pressed-width
Border color--us-button-tertiary-neutral-border-pressed-color

Disabled

Property

Variable name

Font color--us-button-tertiary-neutral-text-disabled-color
Background--us-button-tertiary-neutral-background-disabled
Icon color--us-button-tertiary-neutral-icon-disabled-color
Border width--us-button-tertiary-neutral-border-disabled-width
Border color--us-button-tertiary-neutral-border-disabled-color

Like variant (tertiary-neutral differences)

The Like button fully inherits the properties of the tertiary neutral button, except for the pressed state.

Pressed

Property

Variable name

Background--us-button-like-background-pressed
Font color--us-button-like-text-pressed-color
Icon color--us-button-like-icon-pressed-color

Dislike variant (tertiary-neutral differences)

The Dislike button fully inherits the properties of the tertiary neutral button, except for the pressed state.

Pressed

Property

Variable name

Background--us-button-dislike-background-pressed
Font color--us-button-dislike-text-pressed-color
Icon color--us-button-dislike-icon-pressed-color

Primary Icon-button

The Primary Icon-button is similar to the Tertiary Neutral Button but contains only an icon, providing a simple, visually distinct representation of a specific action.

Property

Variable name

Border radius--us-button-icon-primary-border-radius
Border width--us-button-icon-primary-border-width
Border color--us-button-icon-primary-border-color
Background--us-button-icon-primary-background
Icon color--us-button-icon-primary-icon-color
Box shadow--us-button-icon-primary-icon-boxshadow
Vertical padding--us-button-icon-primary-v-padding
Horizontal padding--us-button-icon-primary-h-padding

Hover

Property

Variable name

Border width--us-button-icon-primary-border-hover-width
Border color--us-button-icon-primary-border-hover-color
Background--us-button-icon-primary-background-hover
Icon Color--us-button-icon-primary-icon-hover-color
Box shadow--us-button-icon-primary-icon-boxshadow-hover

Focused

Property

Variable name

Border width--us-button-icon-primary-border-focused-width
Border color--us-button-icon-primary-border-focused-color
Background--us-button-icon-primary-background-focused
Icon Color--us-button-icon-primary-icon-focused-color

Pressed

Property

Variable name

Border width--us-button-icon-primary-border-pressed-width
Border color--us-button-icon-primary-border-pressed-color
Background--us-button-icon-primary-background-pressed
Icon Color--us-button-icon-primary-icon-pressed-color

Disabled

Property

Variable name

Border width--us-button-icon-primary-border-disabled-width
Border color--us-button-icon-primary-border-disabled-color
Background--us-button-icon-primary-background-disabled
Icon Color--us-button-icon-primary-icon-disabled-color

Icon-secondary (dark variant)

A dark variant of the Secondary Icon-button is used for dark background (e.g. table header, chips). It is available to use in both Medium and Small sizes.

Property

Variable name

Background--us-button-icon-secondary-dark-background
Icon color--us-button-icon-secondary-dark-hover-color
Box Shadow--us-button-icon-secondary-dark-boxshadow

Hover

Property

Variable name

Background--us-button-icon-secondary-dark-hover-background
Icon Color--us-button-icon-secondary-dark-hover-color
Box shadow--us-button-icon-secondary-dark-boxshadow-hover

Focused

Property

Variable name

Background--us-button-icon-secondary-dark-focused-background
Icon color--us-button-icon-secondary-dark-focused-color

Pressed

Property

Variable name

Background--us-button-icon-secondary-dark-pressed-background
Icon color--us-button-icon-secondary-dark-pressed-color
Box Shadow--us-button-icon-secondary-dark-boxshadow-pressed

Disabled

Property

Variable name

Background--us-button-icon-secondary-dark-disabled-background
Icon color--us-button-icon-secondary-dark-disabled-color

Checkbox

The Checkbox component is an input element that enables users to select one or more options from a set of choices. It is typically presented as a small box that users can check or uncheck. The Checkbox allows users to toggle between two states: checked and unchecked.

Base

Property

Variable name

Description

Width--us-checkbox-base-width
Height--us-checkbox-base-height
Border width--us-checkbox-border-width
Border radius--us-checkbox-border-radius
Border color--us-checkbox-border-color
Border color--us-checkbox-inactive-border-colorThis variable changes the border color
in the inactive Checkbox component.

Unselected

Property

Variable name

Description

Background--us-checkbox-unselected-active-bg-colorThis variable is used to change the background
color in the default unselected Checkbox
component while it is active.
Background--us-checkbox-unselected-active-hover-bg-colorThis variable changes the background color
in the hover unselected Checkbox
component while it is active.
Background--us-checkbox-unselected-inactive-bg-colorThis variable is used to change the
background color in the unselected
Checkbox component while it is inactive.

Selected

Property

Variable name

Description

Background--us-checkbox-selected-active-bg-colorThis variable changes the background color
in the default selected Checkbox component
while it is active.
Background--us-checkbox-selected-active-hover-bg-colorThis variable is used to change the background
color in the hover-selected Checkbox
component while it is active.
Background--us-checkbox-selected-inactive-bg-colorThis variable is used to change the background
color in the selected Checkbox component while
it is inactive.

Intermediate

Property

Variable name

Description

Background--us-checkbox-intermediate-active-bg-colorThis variable changes the background
color in the default intermediate
Checkbox component while it is active.
Background--us-checkbox-intermediate-active-hover-bg-colorThis variable is used to change the
background color in the hover
intermediate Checkbox
component while it is active.
Background--us-checkbox-intermediate-inactive-bg-colorThis variable is used to change the
background color in the intermediate
Checkbox component while it is inactive.

Date Picker

Date picker is an element used to select dates or date ranges from a calendar view. It provides users with an interactive and intuitive way to choose specific dates, making it ideal for date-based data input.

Shadow

Property

Variable name

Shadow--us-date-picker-shadow

Date

Property

Variable name

Width--us-date-picker-date-width
Size--us-date-picker-date-height
Border radius--us-date-picker-date-border-radius

Events

Events are used in the Payment calendar component to show cash-in (positive) and cash-out (negative) transactions.

Property

Variable name

Width--us-date-picker-event-width
Size--us-date-picker-event-height
Border radius--us-date-picker-event-border-radius

Footer

The Footer component is positioned at the bottom of a web-component interface, providing users with additional information and navigation options. It can contain 1 or 2 buttons, copyright details, contact information, links to privacy policies, terms of service, and a checkbox.

Note:The only top border is available to be changed in the Footer component.

Property

Variable name

Background--us-footer-bg-color
Vertical paddings--us-footer-v-padding
Horizontal paddings--us-footer-h-padding
Border width--us-footer-border-top-width
Border color--us-footer-border-top-color

Header

The Header component is a critical section located at the top of a web-component interface, providing users with essential navigation. It is divided into two main variations: Primary Header and Secondary Header.

Primary

The Primary Header serves as the primary navigation section. It is the main header for web components. It can include insights and more info icons.

Property

Variable name

Description

Font--us-header-primary-title-font-styleThis variable changes the font style
of the Primary Header component title.
Font color--us-header-primary-text-color
Icon color--us-header-primary-icon-color
Background--us-header-primary-bg-color
Height--us-header-primary-min-heightThis variable changes the minimal height
of the Primary Header component.
Vertical padding--us-header-primary-v-padding
Horizontal padding--us-header-primary-h-padding
Border color--us-header-primary-border-bottom-colorThis variable changes the bottom
border color.
Border width--us-header-primary-border-bottom-widthThis variable changes the bottom
border width.
Border style--us-header-primary-border-bottom-styleThis variable changes the bottom
border style.

Notifications

Property

Variable name

Background--us-notification-bg-color
Font color--us-notification-text-color

Secondary

The Secondary Header is for pages in web components. It can include the main icon, chevron-left, and close icon.

Property

Variable name

Description

Font--us-header-secondary-title-font-styleThis variable changes the font style of
the Secondary Header component title.
Font color--us-header-secondary-text-color
Icon color--us-header-secondary-icon-color
Background--us-header-secondary-bg-color
Height--us-header-secondary-min-heightThis variable changes the minimal height
of the Secondary Header component.
Vertical padding--us-header-secondary-v-padding
Horizontal padding--us-header-secondary-h-padding
Border color--us-header-secondary-border-bottom-colorThis variable changes the bottom
border color.
Border width--us-header-secondary-border-bottom-widthThis variable changes the bottom
border width.
Border style--us-header-secondary-border-bottom-styleThis variable changes the bottom
border style.

Input

The Input component is a fundamental user interface element for data entry and user interactions. It allows users to input text, numbers, or other data into a form or field within the interface.

The Input element presents a text box where users can type, edit, or delete text. It supports various input types, including single-line inputs for short text or numbers and multi-line inputs for longer text or user comments.

Design considerations for the Input element include proper labels, placeholder text, and error messaging to guide users effectively. Providing clear visual cues such as focus states and input validation helps users understand how to interact with the Input and ensures a seamless data entry experience.

Default

Property

Variable name

Description

Placeholder color--us-input-placeholder-colorThis variable is used to change the font and
icon colors of the input in the unfilled state.
Label color--us-input-label-color
Background--us-input-bg-color
Vertical padding--us-input-v-padding
Horizontal padding--us-input-h-padding
Margins--us-input-marginsIt is the distance between the label and input,
input and error message.
Border radius--us-input-border-radius
Border color--us-input-border-color
Border width--us-input-border-width
Font color--us-input-font-colorThis variable is used to change the font color
of the input in the filled (or normal) state.
Icon color--us-input-icon-colorThis variable is used to change the icon color
of the input in the filled (or normal) state.

Hover

Property

Variable name

Border color--us-input-hover-border-color
Font color--us-input-hover-font-color
Label color--us-input-hover-label-color
Background--us-input-hover-bg-color

Focused

Property

Variable name

Description

Border color--us-input-focus-border-color
Font color--us-input-focus-font-color
Label color--us-input-focus-label-color
Background--us-input-focus-bg-color
Icon color--us-input-focus-icon-color
Shadow--us-input-focus-inner-shadowIt is the inner shadow (Input-focus) that is
used only for a focused state.

Error

Property

Variable name

Description

Border color--us-input-error-border-color
Font color--us-input-error-font-color
Label color--us-input-error-label-color
Background--us-input-error-bg-color
Shadow--us-input-error-inner-shadowIt is the inner shadow (Input-focus) that
is used only for a focused state.
Font color--us-input-error-message-font-colorThis variable is used to change the font color
of the error message below the input.
Icon color--us-input-error-message-icon-colorThis variable is used to change the icon color
of the error message below the input.

Disabled

Property

Variable name

Border color--us-input-disabled-border-color
Font color--us-input-disabled-font-color
Label color--us-input-disabled-label-color
Background--us-input-disabled-bg-color
Icon color--us-input-disabled-icon-color

Insight button

The Insight Button is a specialized user interface element that provides valuable insights or information derived from specific parameters or data. It serves as a visual indicator to showcase the basis for the insight. The Insight Button enhances the user experience by providing valuable data-driven insights and facilitating informed decision-making.

Property

Variable name

Description

Paddings--us-insight-button-paddingThis variable is used to change both vertical and
horizontal paddings. It is the same for all states
of the Insight button component.
Border radius--us-insight-button-border-radius
Background--us-insight-button-background
Icon color--us-insight-button-color
Border--us-insight-button-border

Hover

Property

Variable name

Background--us-insight-button-hover-background
Icon color--us-insight-button-hover-color
Border--us-insight-button-hover-border

Focused

Property

Variable name

Background--us-insight-button-focused-background
Icon color--us-insight-button-focused-color
Border--us-insight-button-focused-border

Pressed

Property

Variable name

Background--us-insight-button-pressed-background
Icon color--us-insight-button-pressed-color
Border--us-insight-button-pressed-border

Label and Descriptions

The Label component serves as a succinct marker for categorizing or identifying elements within a user interface. It offers a clear and visually appealing way to highlight attributes, statuses, or pertinent information. Additionally, a Label may incorporate an optional icon, enabling users to access supplementary details or tooltips that elaborate on the associated data, enhancing user understanding and interaction.

General

These are the base variables for all Label types that are mentioned below. Moderate Contrast Labels offer a balanced appearance for most regular usage scenarios. Used on graphs.

Property

Variable name

Vertical padding--us-label-general-
v-padding
Horizontal padding--us-label-general-
h-padding
Border radius--us-label-general-border-radius

Neutral Status

Property

Variable name

Font color--us-label-moderate-
contrast-neutral-text-color
Background--us-label-moderate-
contrast-neutral-background-color
Border color--us-label-moderate-
contrast-neutral-border-color

Primary Status

Property

Variable name

Font color--us-label-moderate-
contrast-primary-text-color
Background--us-label-moderate-
contrast-primary-background-color
Border color--us-label-moderate-
contrast-primary-border-color

Secondary Status

Property

Variable name

Font color--us-label-moderate-
contrast-secondary-text-color
Background--us-label-moderate-
contrast-secondary-background-color
Border color--us-label-moderate-
contrast-secondary-border-color

Success Status

Property

Variable name

Font color--us-label-moderate-
contrast-success-text-color
Background--us-label-moderate-
contrast-success-background-color
Border color--us-label-moderate-
contrast-success-border-color

Warning Status

Property

Variable name

Font color--us-label-moderate-
contrast-warning-text-color
Background--us-label-moderate-
contrast-warning-background-color
Border color--us-label-moderate-
contrast-warning-border-color

Error Status

Property

Variable name

Font color--us-label-moderate-
contrast-error-text-color
Background--us-label-moderate-
contrast-error-background-color
Border color--us-label-moderate-
contrast-error-border-color

Loader

The Loader component is a visual indicator used to inform users about the ongoing progress of an action or operation. It provides visual feedback to users, indicating that the system is processing their requests or loading content. There are two types of Loaders:

  • Spinner

The Spinner type of Loader displays an animated circular or linear motion that continuously rotates or moves in a loop. It is used when the duration of the process or task is unknown or when the process is too complex to be represented by a progress bar (like loading screens or any other job that requires the user to wait for a response).

  • Progress Bar

The Progress Bar type of Loader is a graphical representation of the progress of a process or task. It is used when the duration of the process or task is known, and it is possible to estimate how much time remains until completion.

Property

Variable name

Description

Background--us-loader-track-colorTrack color is the color of the base of the progress
bar or spinner (often in shades of gray).
Background--us-loader-progress-colorProgress color is the color that indicates the loading
or progress dynamics (often in the primary color).

Popup

The Popup component is a versatile user interface element that displays additional information, notifications, or user interactions in an overlay window. It provides focused content without navigating to a new page or disrupting the user's workflow.

Property

Variable name

Description

Border--us-popup-border-radius
Shadow--us-popup-shadow
Status icon--us-popup-status-iconThis variable is used to display an icon
(danger, success, info, or warning) above the popup title.

Radio button

The Radio button component presents users with a list of mutually exclusive options or choices. It allows users to select a single option from the list, indicating their preference or choice.

Property

Variable name

Description

Width--us-radiobutton-base-width
Height--us-radiobutton-base-height
Border width--us-radiobutton-border-width
Border color--us-radiobutton-border-color
Dot color--us-radiobutton-dot-colorThis variable changes the color of the dot
that appears when the Radio button
component is in the selected state.

Hover

Property

Variable name

Background--us-radiobutton-hover-bg-color

Disabled

Property

Variable name

Description

Background--us-radiobutton-disabled-bg-color
Border color--us-radiobutton-disabled-border-color
Dot color--us-radiobutton-disabled-dot-bg-colorThis variable changes the dot color that
appears when the Radio button component
is in the selected but disabled state.

Scroll and Dots

Dots are used to switch between images or screens (e.g., Intro screens).

Scroll (horizontal and vertical) has one color that refers --us-scroll-dot-dot-normal-color.

Property

Variable name

Description

Color--us-scroll-dot-dot-active-colorThis variable changes the Dot component
color while it is active.
Color--us-scroll-dot-dot-normal-colorThis variable changes the Dot component
color while in the default state.

Hover & Focused

Property

Variable name

Background--us-scroll-dot-dot-hover-bg-color
Border color--us-scroll-dot-dot-hover-border-color

Snackbar

The Snackbar component is a temporary, non-intrusive message or notification at the bottom of the user interface. It provides feedback, alerts, or simple interactions without interrupting the user's current task.

There are four main variants of Snackbars:

  • Info Snackbar provides informative messages or general updates to users.
  • Success Snackbar displays messages indicating successful actions or operations.
  • Warning Snackbar communicates warnings and alerts about potential issues or actions that require attention.
  • Error Snackbar informs users about errors or unsuccessful actions that need their attention.

Each Snackbar variant comes in two sizes: large and small.

  • Small Snackbar displays a message and related optional actions and can contain a link and button (Undo).
  • Large Snackbar includes more content and title. It can be used for more critical actions or information.

Property

Variable name

Description

Vertical padding--us-snackbar-base-v-paddingThis variable changes the Dot component
color while it is active.
Horizontal padding--us-snackbar-base-h-paddingThis variable changes the Dot component
color while in the default state.
Title color--us-snackbar-info-title-color
--us-snackbar-success-title-color
--us-snackbar-warning-title-color
--us-snackbar-error-title-color
Icon color--us-snackbar-info-icon-color
--us-snackbar-success-icon-color
--us-snackbar-warning-icon-color
--us-snackbar-error-icon-color
Border--us-snackbar-info-border-leftThis is the border displayed only on the left
side of the Snackbar component and
corresponds to the icon color of each
option. This variable is used to change
border style, border color, and border width.
This applies to all border-left variables (below).
--us-snackbar-success-border-left____
--us-snackbar-warning-border-left____
--us-snackbar-error-border-left____
Border--us-snackbar-base-close-border-leftThis is the border that is displayed only
on the left side of the close icon and
separates the close icon (the option to
dismiss the Snackbar) and the textual
content. This variable is used to change
border style, border color, and border width.
Border radius--us-snackbar-base-border-radius
Shadow--us-snackbar-base-shadow

Tab

The Tab component is a navigational element commonly used in user interfaces to organize content into multiple sections or categories. It allows users to switch between different tabs to access different sets of information or functionalities.

Line tab

Line tabs feature a simple horizontal line beneath the active tab, providing a clean and minimalist visual indicator of the selected tab. It is a middle-level tab, the most used one. It serves for navigation between groups of related content. The line tab can be used with or without an icon.

Property

Variable name

Description

Vertical padding--us-tabs-line-v-padding
Font color--us-tabs-line-color
Icon color--us-tabs-line-icon-color
Border--us-tabs-line-border-bottomThis variable is only used to change
the bottom border style, border color,
and border width.

Hover

Property

Variable name

Description

Font color--us-tabs-line-hover-color
Icon color--us-tabs-line-hover-icon-color
Border--us-tabs-line-hover-border-bottomThis variable is only used to change
the bottom border style, border color,
and border width.

Active

Property

Variable name

Description

Font color--us-tabs-line-active-color
Icon color--us-tabs-line-active-icon-color
Border--us-tabs-line-active-border-bottomThis variable is only used to change
the bottom border style, border color,
and border width.

Disabled

Property

Variable name

Description

Font color--us-tabs-line-disabled-color
Icon color--us-tabs-line-disabled-icon-color
Border--us-tabs-line-disabled-border-bottomThis variable is only used to change
the bottom border style, border color,
and border width.

Pill tab

Pill tabs display a more prominent rounded visual indicator. It is a lower-level tab that serves for switching between views. Also, it can be used as a date period selector inside the date picker, with or without an icon. Pill tabs have two sizes - small and large.

Property

Variable name

Font color--us-tabs-pill-color
Icon color--us-tabs-pill-icon-color
Border color--us-tabs-pill-border-color
Background--us-tabs-pill-background
Border radius--us-tabs-pill-border-radius
Horizontal padding--us-tabs-pill-h-padding
Vertical padding (Small)--us-tabs-pill-s-v-padding
Vertical padding (Large)--us-tabs-pill-l-v-padding

Hover

Property

Variable name

Font color--us-tabs-pill-hover-color
Icon color--us-tabs-pill-hover-icon-color
Border color--us-tabs-pill-hover-border-color
Background--us-tabs-pill-hover-background

Active

Property

Variable name

Font color--us-tabs-pill-active-color
Icon color--us-tabs-pill-active-icon-color
Border color--us-tabs-pill-active-border-color
Background--us-tabs-pill-active-background

Disabled

Property

Variable name

Font color--us-tabs-pill-disabled-color
Icon color--us-tabs-pill-disabled-icon-color
Border color--us-tabs-pill-disabled-border-color
Background--us-tabs-pill-disabled-background

Folder tab

Folder tabs resemble the top of a folder, with a folded corner representing the active tab. This unique design can be useful when organizing content in a folder-like structure. It is a higher-level tab and can be used with or without an icon.

Property

Variable name

Font color--us-tabs-folder-color
Icon color--us-tabs-folder-icon-color
Border color--us-tabs-folder-border-color
Background--us-tabs-folder-background
Border radius--us-tabs-folder-border-radius
Horizontal padding--us-tabs-folder-h-padding
Vertical padding--us-tabs-folder-v-padding

Hover

Property

Variable name

Font color--us-tabs-folder-hover-color
Icon color--us-tabs-folder-hover-icon-color
Border color--us-tabs-folder-hover-border-color
Background--us-tabs-folder-hover-background

Active

Property

Variable name

Font color--us-tabs-folder-active-color
Icon color--us-tabs-folder-active-icon-color
Border color--us-tabs-folder-active-border-color
Background--us-tabs-folder-active-background

Disabled

Property

Variable name

Font color--us-tabs-folder-disabled-color
Icon color--us-tabs-folder-disabled-icon-color
Border color--us-tabs-folder-disabled-border-color
Background--us-tabs-folder-disabled-background

Toggle Switcher

Toggle Switcher is a user interface component that allows users to toggle between two states or options, such as turning a setting on or off, selecting between binary choices, or turning a feature on/off.

Base

Property

Variable name

Description

Width--us-switch-base-width
Height--us-switch-base-height
Border radius--us-switch-border-radius
Background--us-switch-bg-color
Width--us-switch-dot-widthThis variable is used to change the width
of the toggle dot.
Height--us-switch-dot-heighThis variable is used to change the height
of the toggle dot.
Background--us-switch-dot-bg-colorThis variable is used to change the
background color of the toggle dot.
Border width--us-switch-dot-border-widthThis variable is used to change the border
width of the toggle dot.

Inactive

Property

Variable name

Background--us-switch-inactive-bg-color

Active Disabled

Property

Variable name

Description

Background--us-switch-active-disabled-bg-color
Background--us-switch-active-disabled-dot-bg-colorThis variable is used to change the
background color of the toggle dot
in the active disabled state.

Inactive Disabled

Property

Variable name

Description

Background--us-switch-inactive-disabled-bg-color
Background--us-switch-inactive-disabled-dot-bg-colorThis variable is used to change the
background color of the toggle dot
in the inactive disabled state.

Tooltip

The Tooltip component is a user interface element that provides additional contextual information or hints when users hover over or interact with a specific UI element. It appears as a small, non-intrusive popup near the target element, helping users better understand its purpose or function. It can contain a link.

Property

Variable name

Font color--us-tooltip-color
Background--us-tooltip-background-color
Vertical padding--us-tooltip-v-padding
Horizontal padding--us-tooltip-h-padding
Border radius--us-tooltip-border-radius
Shadow--us-tooltip-shadow