Recently, we publicly launched v7 of the Tesla Design System across the Tesla digital ecosystem (e.g. tesla.com, mobile app, etc.).
Prior to the release and since then, I get folks curious about the specs of our button (or another UI element like the link/anchor tag), so I thought I'd briefly share here what I typically share with them.
Anatomy of a Tesla Design System (TDS) UI Button. For the full specs, inspect the source code of the button using your browser's DevTools (the beauty of the World Wide Web!)
All of our UI components, like the button, and their source code, are completely accessible to anyone, anytime simply by the nature of the Web: it's just HTML and CSS under-the-hood. In other words, one of the best ways to learn more about our UI components, and perhaps from a developer's perspective, is to inspect our source code using the browser's DevTools, which I highlight in this earlier post focused on our CSS props.
In the foreseeable future, and to fully reciprocate with the rest of the open source community, we anticipate sharing more of our UI components' usage guidelines, but in the meantime, I hope you find this little bit I shared above helpful! 🤓