Components

Button components and size variants. Use the primary and secondary buttons in dialogs or screens where one action is required. In the Viewer application, use ghost button in panels where many different actions are available.

When possible use Switch in place of checkbox. If necessary, Checkbox provides a smaller component to change between two states or options.

A selectable row with action menu options and visibility toggle. Color, Secondary details, and Image Series are optional to display.

Dropdown menu provides a flexible list of options that can open from buttons or other elements

Input fields can be used with or without example text

Displays a scroll indicator when hovering within an element.

Switch between a list of options

Used to select a value in a predefined range.

A toggle Switch is used to change between two different states. Use descriptive labels next to Switches that are understandable before interacting.

Tabs (or segmented controls) can be used to provide navigation options or allow users to switch between multiple options (e.g., tool settings)

A toast notification displays temporary feedback messages to users above the current UI. Notifications stack into one unit after multiple cascading notifications.