About Dialtone

Dialtone is Dialpad's Design System that unites product teams around a common visual language.

Release Notes

Dialtone version number

v10.9.0

  • Dialtone Query Core: DLT-3672 find components in contextual keyword searches (#1476) (81bb86d)

  • Dialtone Vue: DLT-3102 add data-qa hooks and migrate selectors (#1475) (cc927a9)

  • Dialtone Docs: DLT-3447 repair contributor references and routing (#1487) (a9887c1)

  • Combinator: DLT-3679 add opt-in slider property controls (#1485) (f853c79)

  • Dialtone Cli, Dialtone Mcp Server: DLT-2711 retrieve documentation examples with complete setup (#1473) (f4d6b67)

  • Dialtone Icons: DP-211072 add globe icon (#1484) (04e1640)

  • Dialtone Mcp Server: DLT-3654 resolve installed project data (#1471) (d098c6b)

  • Dialtone Tokens: DLT-3577 sync tokens to figma variables (#1411) (f4d93c0)

  • Dialtone Tokens: DLT-3681 sync an unrestricted variable collection to its own file (#1488) (7141053)

  • Motion Text, Dialtone Tokens: DLT-3648 match figma motion spec and add slide-in-gradient mode (#1457) (0a1371e)

  • Slider: DLT-1974 add DtSlider component (#1420) (6f0e7b5)

v10.8.0

  • Dialtone Docs: DLT-3653 preserve documentation contracts (#1460) (a46ac06)

  • Dialtone Query Core, Dialtone Docs: DLT-3085 retrieve directive guidance (#1463) (d28b2f7)

  • Dialtone Documentation: DLT-3665 clarify CLI and MCP guides (#1470) (1450a8d)

  • Foundations: DLT-3662 align brand guidance with resolve brand (#1467) (c6e12aa)

  • Dialtone Query Core: DLT-3659 share curated discovery keywords (#1472) (1033549)

v10.7.0

  • Dialtone Query Core: DLT-3651 align search and migration guidance (#1461) (84ac078)

  • Docs: DLT-3664 normalize icon catalog search (#1469) (588b248)

  • Dialtone Icons: DLT-3663 add stop-stroke (#1468) (eb72e37)

  • Dialtone Mcp Server: DLT-3650 add complete API retrieval and provenance (#1462) (c23dc8c)

v10.6.0

  • Dialtone Mcp Server, Dialtone Cli: DLT-3655 unblock startup and shared releases (#1454) (2f72801)

  • Dialtone Mcp Server, Dialtone Query Core: DLT-3640 correct guidance and version metadata (#1452) (6dcebc5)

  • Eslint Plugin Dialtone: DLT-3645 enable umbrella checks and skip undeclared installs (#1453) (64147d4)

  • Mode: DLT-3658 document v-dt-mode as the default (#1459) (183bea2)

  • NO-JIRA fix performance issue doc page (#1451) (17ec4dd)

  • Dialtone Query Core: DLT-3649 align public component identity (#1455) (94d7d56)

  • Stack: DLT-3657 add wrap prop (#1458) (9699220)

v10.5.1

v10.5.0

  • Dialtone Cli: DLT-3222 suppress query-core debug output (#1448) (21c883c)

  • Modal: DLT-3476 do not close when drag starts inside dialog and ends on backdrop (#1445) (c6fb6ef)

  • Box Sizing: NO-JIRA correct class table (#1446) (3e28930)

  • Dialtone Cli, Dialtone Query Core: DLT-3639 select exact component names and use the project's Dialtone data (#1449) (1c236be)

  • Tooltip: DP-211073 make arrow optional (#1447) (67b7afb)

v10.4.0

  • Icons: DLT-3613 add email-rejected and chat-rejected icons (#1442) (153a6cc)

v10.3.0

  • Language Server: NO-JIRA declare typescript-eslint deps used by eslint config (#1444) (3a99e50)

  • Rich Text Editor: DP-209950 linkify pending URL before send when no trailing space (#1439) (234cf7f)

v10.2.0

  • NO-JIRA change dialtone channel link to slack (#1441) (cb330ca)

  • Dialtone Icons: NO-JIRA add microsoft-sharepoint brand-full-color icon (#1443) (89b38f0)

v10.1.0

  • Split Button: DLT-3630 DLT-3631 add startButtonClass and endButtonClass props (#1440) (7d30032)

All Releases

Components

Components are reusable building blocks that support a specific interaction or UI need. These components can be reused across Dialpad products and projects ensuring UI consistency and cohesion while helping teams deliver high-quality features faster.

Dialtone provides two options to use the components: CSS and Vue.

Vue components (recommended)

Use Vue components in the case your project supports Vue since these components are built conforming to WCAG AA Accessibility Guidelines and with usability and performance in mind.

CSS components

If Vue isn't supported in your application, you can use the CSS components in your project, but you'll be responsible for writing the correct markup, managing DOM elements and events, and making it accessible for all users.

See more about components usage.

Intake

Contributions

Read about how to contribute to Dialtone.

Request a feature

If your design isn't supported by any existing component, or the component you want to use isn't flexible enough to use in your design, please request a feature by filling out this form.

Report a bug

Please refer to CONTRIBUTING.md for reporting any issue.

Contact Us

About Dialtone documentation last updated Tuesday, October 27, 2026