Carbon Design System
Preview

Code snippet

Stable
Last updated Jul 1, 2026
Carbon Core

Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file.

Code snippet

What Carbon provides

Carbon bakes keyboard operation into its components, as well as many other accessibility considerations.

Keyboard interaction

For all three variants, the code snippet can be copied with Space or Enter. Arrow keys can operate scroll bars.

inline code snippet keyboard interaction

By default, each inline code snippet is reachable by Tab and copied with Space or Enter.

single line code snippet interaction, with 2 tab stops

The single line code snippet tabstop supports left and right arrow key scrolling.

multi-line code snippet keyboard interaction

The multi-line's buttons are reachable by Tab and activated with Space or Enter.

Labeling and updates

Carbon provides the copy button's default label and tooltip behavior. Carbon handles notices about the success of the copy function, as well as updates to the Show more mechanism.

hovering on the button exposes 'copy to clipboard' tooltip

The code snippet's buttons expose their labels on hover or focus.

the activated button shows a 'copied!' message

The results of activating buttons are provided in text.

Development considerations

Keep this in mind if you are modifying Carbon or creating a custom component:

  • the inline code text is implemented as a button so its text can be copied
  • single line snippets take an additional tabstop to support arrow key scrolling

Accessibility testing status

Latest version: 1.109.0 | Framework: React (@carbon/react)

ComponentAccessibility testStatusLink to source code
Code snippetTest(s) that ensure the initial render state of a component is accessible.Automated or manual testing has been temporarily deferred.GitHub link
Tests that ensure additional states of the component are accessible. This could be interactive states of a component or its multiple variants.Automated or manual testing has been temporarily deferred.
Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent.Test data is either not available or not applicable for this component state.
This manual testing ensures that the visual information on the screen is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.Test data is either not available or not applicable for this component state.

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Code snippet | Carbon Design System