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:
This release delivers significant performance enhancements and expanded component capabilities. The Tecton SDK and Platform packages are now 20% smaller thanks to the removal of duplicate dependencies, resulting in faster load times and improved application performance. The Pagination component has been enhanced with the ability to stack results and page count information for better space utilization in compact layouts. The Tooltip component now intelligently adjusts its position to avoid rendering off-screen, ensuring tooltips remain visible regardless of viewport constraints. Additional theming flexibility has been added to the icon variant of Button components, exposing hover and stroke CSS overrides for more granular design control. Coin buttons now support themeable border-radius values, allowing for greater visual consistency across custom themes. Platform loading states have been expanded with the setFetching() capability now supporting variable loading options to better match different use cases.
Critical stability and performance issues have been addressed in this release. Memory leaks within Tecton have been identified and resolved, improving long-running application performance and reducing browser resource consumption. The Tecton theme initialization process has been hardened to properly inject style tags on slow CPU devices. Spinner loaders within platform outlets are now properly vertically centered for improved visual consistency. The Pagination component now correctly handles invalid input by reverting to numeric values when non-numeric characters are entered in the page field.
Accessibility testing coverage has been expanded with comprehensive Axe test coverage for the Card component, ensuring better accessibility compliance. The Color System documentation page has been completely redesigned with improved organization, visual examples, and guidance for implementing color tokens throughout your applications.