Welcome to Tecton

Tecton is Q2's library of design system components and platform interface capabilities. It allows Q2 and our partners to build cohesive and consistent UI experiences for end users across a variety of Q2 products.

Tecton consists of:

We're excited to see what you'll build! To get started, feel free to check out some of the following links:


Tecton 1.67.0

Component Features, Improvements, and Bug Fixes

  • Carousel Design Update — Visual refresh with updated design alignment.
  • Popover Animation — Entrance animations added for a more polished user experience.
  • Checkbox & Popover Themeable Animations — Animation behavior is now fully themeable, giving consumers control over motion preferences.
  • Avatar Affordance Slot — New affordance slot enables badge-style indicators and interactive overlays to be composed directly onto avatar elements.
  • Item Font Style Override — A new font-style prop allows typographic customization on item components.
  • Tabs Consistent Defaults — Tabs now ships with sensible defaults across all variants, reducing setup boilerplate.
  • Stepper Disabled Pane — Individual stepper panes can now be disabled, supporting locked steps in multi-step workflows.
  • Data Table Multi-Tag Support — Cells now support multiple Tag elements for richer status and categorization displays.
  • Select Mobile Fix — Resolves a searchability issue on mobile and a bug where tab-sequence whitespace appeared in displayed text.
  • Editable Field Event Fix — Native change events no longer bubble, ensuring cleaner form event handling.
  • Popover Scrollable iframe Positioning — Popovers now anchor correctly to their trigger elements inside scrollable iframes.
  • Pagination Event Fix — All pagination change events now consistently include page and perPage values.
  • Chart Bug Fixes — Resolved an error when chart data is updated dynamically, and a hover state issue affecting donut chart slices.
  • Pill Accessibility Fix — Corrects a contrast issue with the primary background color in the standard theme.
  • Tab Container Fixtecton-tab-pane elements now render correctly within the tab container.

Accessibility Enhancements

  • Cross-Shadow-DOM ARIA Labels — Components wrapping interactive elements with a Tooltip now correctly propagate aria-label attributes across shadow DOM boundaries, improving screen reader support for composed components.

Capability Updates

  • getPendoInfo() Custom Script URL — Platforms can now supply a custom Pendo script URL, supporting self-hosted or custom Pendo builds.
  • Improved iOS 18 Browser Detection — Browser detection underlying Select's iOS handling now correctly identifies iOS 18 in the Q2 mobile app, resolving a mobile-specific rendering issue.

View full changelog