Captions provide a concise explanation of certain elements. Captions are
most effective when they give new information to the user rather than
describing the obvious.
Tags that are meant to help arrange information into distinct categories.
Color option does not carry any semantic meaning. Color could be swapped
without causing any effect on the tag's meaning.
The chat components offer instant real-time communication between
two (or multiple) parties. It also serves as a log or transcript
of past conversations. Individual chat components assemble into
a chat window layout.
A checkbox is a binary form of input and is used to let a user select one
or more options for a limited number of choices. Each selection is
independent (with exceptions). If tristate is enabled, checkbox can be in
three states: checked, unchecked and indeterminate.
Chips are a visual representation of a keyword or phrase that the user has
used for purposes of filtering the scope of content displayed in the
application interface at any given time.
The loader gives the user immediate feedback of the action or event being
processed and in progress. It shows the events like processing, uploading,
or downloading, and others.
An embedded search that is designed to be used inside the dropdown menu.
Is styled to be in line with the default dropdown list items. Will call for
the focus on display.
Highlights are used to emphasize specific parts of the content that need to
stand out from the rest. Highlights serve as a guide when users skim
through the content, searching for relevant information,
such as price or dates.
Highlights are used to emphasize specific parts of the content that need to
stand out from the rest. Highlights serve as a guide when users skim
through the content, searching for relevant information,
such as price or dates.
Highlights are used to emphasize specific parts of the content that need to
stand out from the rest. Highlights serve as a guide when users skim
through the content, searching for relevant information,
such as price or dates.
The icon list component serves as a static, non-interactable option and is
used when you need to show an icon with a label and/or optional description.
Labels are informative text that describes the function or purpose of an
element. Labels are usually actionless and should always be visible in the
interface. Precise labels contribute to a more convenient experience.
Labels are informative text that describes the function or purpose of an
element. Labels are usually actionless and should always be visible in the
interface. Precise labels contribute to a more convenient experience.
Lists are vertically organized groups of data. Optimized for reading
comprehension, a list consists of a single continuous column of rows, with
each row representing a list item (in some cases on bigger viewports it
could use a multi-column layout).
Lists are vertically organized groups of data. Optimized for reading
comprehension, a list consists of a single continuous column of rows, with
each row representing a list item (in some cases on bigger viewports it
could use a multi-column layout). OptimusNavListTile is meant to be
used an a tile, which contains some interactable element, e.g. tile which
leads to the new screen.
Group of checkboxes with a parent checkbox, which displays the current state
of its children. Clicking on the parent checkbox will change the state of
all its children.
Notification is used for showing a brief and concise message that
communicates immediate feedback with optional action included. Notifications
are noticeable but not intrusive to the use and can be temporary.
Split buttons have a main action and a dropdown action. The main action is
on the left. An arrow on the right opens a dropdown menu with more actions
related to the main action.
A link widget that is used to display a link on its own, not a part of the
body of the text. Can be paired with an icon if it links somewhere external.
Tags are used to highlight an item’s status or make it easier to recognize
certain items in data-dense content.
For system-specific feedback with semantic significance use OptimusTag.
For data-dense content, where representation isn't carrying semantic
significance use OptimusCategoricalTag.
The toggle component serves as a visual representation of a binary choice,
providing users with a clear way to control settings, preferences, or switch
between different views. With its ability to instantly communicate changes
and offer immediate feedback, the toggle component greatly enhances
usability and interactivity.
Tooltip displays contextual content upon the click or focus of a UI trigger
element. Tooltip's content should be contextual, helpful, and nonessential
while providing that extra ability to communicate and give clarity to a
user.
Wrapper for the OptimusTooltip widget. It is responsible for showing and
hiding the tooltip. Will try to position the tooltip depending on the
available space.
Both types of step have dedicated states. State is shown through a visual
change in the step indicator and in the divider between steps.
All of this forms a visual distinction between the finished and unfinished
part of a process.
