Welcome to our latest Solid Design System release! This iteration opens up new directions with versatile components like the sd-range slider and sd-menu, along with refreshed visuals such as the pill-shaped radio group and the reimagined sd-loader. Each update is designed to make it easier to navigate, choose and build—helping you find the right path within an ever-expanding range of intuitive, accessible options. Alongside these highlights, we’ve made usability improvements and other updates across Storybook and Figma, all focused on delivering a smoother, more user-focused experience.
A Range of Possibilities
We’re excited to unveil the sd-range - a brand-new, flexible, and accessible slider component that enables users to select single values or ranges with ease.
What to expect:
Flexible Configuration: Customize the appearance of the range component to fit your use case, with variant options in Figma.
Double-Knob Support: Allow users to set both minimum and maximum values with two adjustable handles.
Visual Track Bar: Easily show or hide the track bar for a clear visual reference.
Scale Ticks: Add ticks with customizable appearance to display e.g. a scale steps or milestones.
Interactive Tooltips: Display current values during user interaction.
Start using sd-range to deliver an intuitive, flexible, and accessible way for users to interact with values and ranges in your application.
Smooth interactions with sd-menu
We’re pleased to announce the release of sd-menu and sd-menu-item - components designed for application menus, giving users quick access to actions and functions within dropdowns.
What to expect:
Flexible Customization: Easily enhance menu items with icons via the “icon-indent” slot, and create interactive, checkable options for toggling features on or off.
Submenus & Grouping: Easily nest submenus for deeper action lists and use dividers to group related items.
Every detail of sd-menu and sd-menu-item is designed for seamless, accessible experiences - perfectly integrated in our sd-dropdown component. Intuitive keyboard interactions and strong accessibility make it easy for everyone to engage with your app’s actions. Bring new usability and delight to your applications - sd-menu and sd-menu-item are now ready to be used.
Menu item
Menu item
Menu item
From Rectangle to Pill: A fresh take on selection
We have redesigned the radio-button to achieve a new look and feel which in combination with the radio-group (radio-button-group in figma) replaces the traditional rectangular style with a pill-shaped variant. This new appearance makes your interfaces feel more modern and visually appealing. The pill shape also improves clarity and makes it easier for users to select options.
Radio Button
Radio Button
Radio Button
Radio Button
Enhancing Style, Interactions, and Versatility
We’ve introduced several updates to improve the flexibility, consistency, and overall user experience of our components:
Versatile Pagination: The sd-pagination style component now supports buttons alongside links, offering greater flexibility for use in various contexts, such as single-page applications (SPAs).
Smoother Tab Interactions: The sd-tab and sd-tab-group components now feature new animations, creating a more fluid and engaging interaction experience.
Style Alignment with Figma: To ensure closer alignment with our Figma designs, we’ve made several refinements.
New Overview pages: Now, every component - even those only in Storybook - has an overview page in our documentation. This ensures all components are clearly documented and easy to find, no matter where they live.
From Spinner to Loader
Say hello to sd-loader! Formerly known as sd-spinner, our loading component now features a refreshed, brand-aligned design and a sleek new animation - delivering a more cohesive and polished experience for your users. In Figma, sd-spinner has been renamed to sd-loader, fully replacing the previous component. In Storybook, both versions are currently available, but sd-loader will eventually replace sd-spinner there as well.
Enhanced search extended to CSS styles
Building on the success of our enhanced component search in Figma - which allows users to effortlessly find what they need, even without knowing the exact name - we’re now extending this intuitive search experience to our CSS styles as well.
What’s new in Figma
We’ve made Figma easier to use: Navigation items now highlight when active, Switch shows error messages with a warning icon, and sd-radio-group labels use sentence case. We’ve also renamed some base components and now hide video sample descriptions in teasers.
The component library has been reorganized for clarity. Button Group, Quote, and Super Number are now grouped on a “Templates” page. Some templates, like Hidden Links and Navigation, have moved to Figma Docs. The Navigation template is now combined with Header as “Header Navigation.”
Additionally, the Getting Started section now includes a link to the UX Pattern File, making it easier to find and access helpful resources.
