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.

Searchable dropdown built with Command + Popover primitives.

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

Modal dialog with header, content, and footer actions.

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

Lightweight, non‑modal surface that appears on hover or focus.

Input fields can be used with or without example text

Labels clarify the purpose of controls and improve accessibility.

Collapsible panels for grouping controls or metadata inside side‑panels.

Transient panel that appears over content—great for small forms, extra details, or actions.

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.

Used to activate tools or perform single actions

A compound component that combines a primary tool button with a dropdown menu of additional related tools