Carbon Design System

The @carbon/layout package provides layout helpers and specifications for the IBM Design Grid. It is available in both Sass and JavaScript.

Note: This package does not provide the grid implementation itself. For the grid implementation, use the @carbon/grid package.

Key features include:

• Breakpoints: Variables and settings for the IBM Design Grid (gutters, breakpoints) and helpers for working with them.
• Unit conversion: Helpers for converting between px, rem, and em.
• Key heights: Helpers for managing key heights across different breakpoints.
• Mini unit: Helpers for working in multiples of the mini-unit.
• Spacing: A spacing scale and helpers for using steps within that scale.

The DatePicker component allows users to select either a single date or a range of dates. It is used to display past, present, or future dates. The specific implementation depends on whether you need an exact, approximate, or memorable date.

Note: The DatePicker component requires a DatePickerInput as its child to function correctly.

The cds-toggle component is a web component used to represent a binary choice (on/off). It is part of the Carbon Design System web components library.

Common usage patterns include:

• Small Toggle: A compact version of the toggle.
• Skeleton: A version used for loading states.
• Accessible Labels: Using accessible labels to ensure the component is usable by assistive technologies.

The @carbon/icon-build-helpers module is a private utility used within the Carbon Design System monorepo to centralize icon-related tooling. It provides the logic for:

• Asset Processing: Searching directories of .svg assets and structuring them by size and prefixes.
• Custom Builders: Generating icon libraries for various targets, specifically Vanilla and React.
• CI Validation: Implementing repository status checks for icon metadata files, specifically metadata.yml and categories.yml.

This tooling powers the generation of the following SVG-based projects:

• @carbon/icons
• @carbon/icons-react
• @carbon/pictograms
• @carbon/pictograms-react

The @carbon/styles package provides the Sass files required to include all styles for the Carbon Design System, including themes, tokens, CSS helpers, and components.

Important Note for @carbon/react users: You may not need to install @carbon/styles separately if you are already using @carbon/react. The module paths in @carbon/styles and @carbon/react are synonymous, as @carbon/react re-exports everything from @carbon/styles. For example, @carbon/styles/scss/components/button is equivalent to @carbon/react/scss/components/button.

The <Modal> component allows you to render a bespoke set of contents within a modal overlay. The children prop is used to map to the modal body content. You can customize the text for various parts of the modal using the following props:

• modalLabel: Text for the modal label.
• modalHeading: Text for the modal heading.
• secondaryButtonText: Text for the secondary action button.
• primaryButtonText: Text for the primary action button.

The Menu component implements the menu design pattern defined in the ARIA Authoring Practices Guide (APG). It is a versatile component designed to hold various subcomponents that represent different types of menu interactions.

To build a valid Menu, its children must be a collection of the following subcomponents:

• MenuItem
• MenuItemDivider
• MenuItemGroup
• MenuItemSelectable
• MenuItemRadioGroup

Figma Code Connect for Carbon React links Carbon v11 All themes Figma library components directly to their @carbon/react counterparts.

When integrated into a workflow, Figma's Dev Mode displays actual code snippets from Carbon React instead of generic placeholders. It also maps properties from Carbon React code to Figma, allowing for dynamic and accurate code examples in the design tool, which helps maintain consistency between design and engineering.