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.71.0

Component Enhancements

  • Pill Decorator Slot — The pill component now supports an optional decorator slot for displaying icons before the label, with CSS custom properties for styling the icon in both normal and active states.
  • Carousel Optional Loop Control — A new loop prop allows carousel navigation to disable continuous looping for more linear navigation experiences.
  • Surface Interactive States & Styling — The surface component now supports clickable states (hover and active/pressed backgrounds) with new CSS custom properties, plus a new gray background option.
  • Tab Container Vertical Orientation — New CSS custom properties enable vertical tab orientation with flexible tab strip width and active indicator styling control.
  • Button & Pill Letter-Spacing Inheritance — Buttons and pills now respect letter-spacing CSS properties inherited from ancestor elements.

Accessibility Improvements

  • Form Input Error Announcements — Error messages on inputs and select components are now announced to screen readers. Error content properly connects to form fields via ARIA descriptions.
  • Calendar Component Enhancements — Calendar toggle buttons announce open/closed, include descriptive aria-labels combining field label with "date field" text, andfeature screen-reader-only captions.
  • Input & Search ARIA Attributes — Inner input elements now expose aria-expanded and role attributes.
  • Stepper Screen Reader Announcements — Step position and status now announced in screen reader text; decorative status icons marked as hidden.
  • Carousel Pagination Labels — Pagination buttons include pane labels in aria-label announcements.
  • Action Sheet & Calendar Dialog Labeling — Dialog elements are properly connected to their titles via aria-labelledby.
  • Textarea Resize Handle — Removed redundant aria-label and marked as aria-hidden.

Component Refinements & Fixes

  • Action Sheet Mobile Spacing — Bottom margin now respects safe area insets on mobile devices.
  • Button & Components Design Token Updates — Updated border-radius and min-height tokens.
  • Checkbox Group Visual Consistency — Toggle checkbox track uses transparent background in standard aesthetic.
  • Message Vertical Spacing — Improved between message elements.
  • Pill Keyboard Accessibility — Slot content in popover-top and popover-bottom is now keyboard-accessible.

Platform Capabilities

  • set-title() Module IdentificationsetPageTitle and setOverpanelTitle adapter functions now receive the moduleId as a second parameter.

View full changelog