Guide
Ready to make the migration to Carbon v11? There are breaking changes along with net new features that your product can now consume. Getting started with Carbon has never been easier!
Overview
Carbon v11 focuses on quality of life updates for designers and developers including token and prop renaming for ease of use, component API updates for a more predictable developer experience, and introducing CSS grid for accurate layout building in line with the design language.
With no changes to the IBM Design Language, v11 will not require any brand-driven product redesigns.
Migrating to Carbon v11 comes with many changes to our system that will help designers and developers build faster, increase flexibility, and improve ease of use.
What’s changing
- APIs: Size prop naming conventions have been updated to be consistent across all components.
- Color tokens: Existing tokens have been renamed to better reflect their usage and new tokens have been added to fill existing color token gaps in our system.
- Sass modules: Carbon styles have been updated to use its own dedicated package and is transitioning to Sass modules.
- Theming: New support for inline theming and light or dark modes.
- Design kit: The Sketch theme libraries have been updated to include all v11 updates. Other design tools may have a rolling update to come.
- Components: A new one-package install along with new components and API updates.
- Grid: New CSS Grid support to make it easier to build layouts.
- Component props: Changes include updates
className, event handlers and size props. - Component updates: While working with IBM Accessibility group we have focused on updating the following accessibility primitives: Notification, Tooltip and Content Switcher.
- Changes to
@carbon/icons-react: We are updating the default size tomdautomatically included in the@carbon/reactpackage. - New Components: We have some exciting new components! Here they are: Popover, Tooltip, Dialog.
What’s not changing
- There are no changes to the IBM Design Language.
- Product UIs do not need to be visually redesigned.
- Existing color tokens with name changes will continue to work in v11.
- Assets that are deprecated in v10 will remain in v11 and will be removed in v12.
Getting started
Whether you are a designer or a developer, we have curated guidance ready for you as your team makes their migration. Dive in and start using v11 right now!
