May 2025 - Monthly Update

Here’s what’s new and improved in the Vivid Design System for May 2025.

13/05/2025: Watch the recording

• [Accordion Item]: Request for a slot to be added to the header to enable control of text formatting. VIV-2636
• Typography Discussion: There is interest in giving teams more control over font sizes, particularly for headings and titles. We have an epic planned for Q3 where we will add to our Design Token architecture and the scope of this will include Typography. This will result in future updates to how typography tokens or utilities are exposed.
• [Data Grid]: Request for fixed columns functionality. VIV-2645

27/05/2025: Watch the recording

• [Divider]: Request to change the color of the divider. And also provide a variant to enable an alternative color. VIV-2684
• [Menu Item]: Request to update the styles to match the option component (rounded corners & padding) VIV-2686

• Why Staying Up to Date with Vivid Packages Matters
• The Evolution of the Vonage Design System: From Volta to Vivid

The Icon component now supports a label attribute to improve accessibility for informative (non-decorative) icons. This provides a reliable way to convey meaning to assistive technologies.

This replaces our previous recommendation to use aria-label, which does not consistently work across all screen readers when applied to non-interactive elements like Icon.

The icon attribute has been deprecated across all components that previously supported it. The recommended way to add an Icon to a component is via the icon slot.

Using the icon slot allows you to pass in an actual icon element, which can include an accessible label — making it possible to describe informative icons for screen reader users. This approach provides greater flexibility and improves accessibility.

When Searchable Select is in multiple mode, it is now possible to set the maximum amount of items the user can select. The amounts (selected and maximum) are displayed to the user next to the label.

It is now possible to align the size of the Badge component with the smallest Button variant. This is helpful for layouts where they are aligned together horizontally, eg. inside a Data Grid.

The Card can now be made clickable as either a link or button.

We have added helper-text and error-text attributes to the Radio Group component bringing it in line with other form elements.

We have added a focus() method and an autofocus property to the Dail Pad component.

The icon-decoration prop is deprecated with the previous outline style which is now the default and only supported icon style. icon-decoration will be removed from the API in a future major release.

As part of our drive to improve accessibility we are decoupling our component API from raw HTML accessibility attributes (like role or aria-* attributes). To this end we have introduced the control-type attribute to replace the role attribute which will be deprecated.