Code snippet - Carbon Design System

Code snippets are strings or small blocks of reusable code that can be copied and inserted in a code file. FoundationsIBMBrandCenterIBMDesignLanguageImplementationCarbonDesignSystemCarbonforIBMProductsCarbonforIBM.comIBMEventDesignIBMWorkplaceDesignPracticesEnterpriseDesignThinkingIBMAccessibilityIBMDesignforAIIBMDesignResearchIBMExperienceStandardsCommunityIBMDesignRacialEquityinDesignAllaboutCarbonWhatisCarbon?WhousesCarbon?TheCarbonecosystemTheCarbonteamPartnersCasestudiesOverviewConsistencyintheCloudIBMCommercePlatformWhat’shappeningReleasesThev11releaseNewsandarticlesMeetupsWorkinprogressDesigningGetstartedDesignkitsOtherresourcesTutorialsDevelopingGetstartedFrameworksDeveloperresourcesAngulartutorialReacttutorialVuetutorialContributingOverviewBugsandrequestsDocumentationComponentsIconsPatternsPictogramsAddonsGuidelines2xGridAccessibilityContentColorIconsPictogramsMotionSpacingThemesTypographyComponentsOverviewAccordionBreadcrumbButtonCheckboxCodesnippetContentswitcherDatatableDatepickerDropdownFileuploaderFormInlineloadingLinkListLoadingModalNotificationNumberinputOverflowmenuPaginationProgressindicatorRadiobuttonSearchSelectSliderStructuredlistTabsTagTextinputTileToggleTooltipUIshellheaderUIshellleftpanelUIshellrightpanelPatternsOverviewCommonactionsDialogsDisabledstatesEmptystatesFilteringFormsGlobalheaderLoadingLoginNotificationsOverflowcontentSearchStatusindicatorsTexttoolbarCommunityassetsOverviewComponentindexPatternsDomainguidanceDatavisualizationGetstartedCharttypesChartanatomySimplechartsComplexchartsColorpalettesAxesandlabelsLegendsDashboardsHelpFAQsCertificateofOriginalityMigrationguideContactusGitHubCollapsenavigationitemsCodesnippetUsageStyleCodeAccessibilityCodesnippetsarestringsorsmallblocksofreusablecodethatcanbecopied andinsertedinacodefile.OverviewLivedemoFormattingContentUniversalbehaviorsInlineSinglelineMulti-lineModifiersFeedbackOverviewTherearethreedifferentvariantsofcodesnippetstohelpcatertovariedline lengthusecases—inline,singleline,andmulti-line.VariantsVariantPurposeInlineAblockoftextusedinlinewithsentencesorparagraphs.SinglelineAsinglelineofcode.Multi-lineMultiplelinesofcodewiththeabilitytoshowmoreorlessstrings.WhentouseUseacodesnippettohelptheusercopystringsoftexteasily,orifyou wanttocalloutkeywordsfortheuser.Codesnippetsaretypicallyusedincodedocumentationtohelptheuserget startedquickly.WhennottouseDonotuseacodesnippetifyouwanttheusertochangetheinputvalue.Our codesnippetsarereadonly.LivedemoThemeselectorWhiteOpenmenuVariantselectorSinglelineOpenmenuCodeSandboxReactAngularVueVanillaWebComponentsCopytoclipboardCopied!LiveeditorfortheSinglelinecomponent node-v node-v CodeSnippetModifierslightFormattingAnatomy Snippettext:Linesorablockofcode.Copybutton(optional):Aniconbuttontocopythecodetotheclipboard.Showmorebutton(optional):Aghostbuttontoexpandorcollapsethe codesnippettoshowmoreorfewerlinesofcode.PlacementCodesnippetcontainersshouldverticallyaligntothegridwithotherform componentsonapage.Note:Ifusinganinlinecodesnippet,thesnippetwilllivewithinabodyof text. Doaligncodesnippetcontainerstothegrid. Donotaligncodesnippettexttothegridandhangthecontainer.ContentMainelementsSnippettextMakesurethecodeisusingthecorrectsyntaxsothatthecodewillnotbreak iftheusercopiesittotheirclipboard.CopybuttontooltipThecopybuttonshouldbeaccompaniedbyatooltip.Tooltipfeedbacktext shouldbeconciseanddescribetheactiontakenwhentheuserclicksthecopy button.Bydefaultwedisplaythetext“Copiedtoclipboard”.ShowmorebuttonTheghostbuttontextshoulddescribewhatthebuttonwillrevealorhidewhen theuserclicksit.Bydefaultwedisplaythetext“Showmore”or“Showless”.FurtherguidanceForfurthercontentguidance,seeCarbon’s contentguidelines.UniversalbehaviorsCopytoclipboardCodesnippetsbydefaulthaveacopyfunctionalitythatallowsuserstocopythe providedcodetotheirclipboard.Thecopyiconmustbeaccompaniedbya confirmationtooltipthatstatesthesuccessfulactionofcopyinganitemtothe clipboard.Havingcopyfunctionalityisoptionalandcanberemovedifit’snot necessaryforyourusecase. InteractionsMouseAninlinecodesnippetcanbecopiedbyclickinganywhereonthesnippetitself. Asinglelinecodesnippetcanbecopiedbyclickingonthe“copy”iconorby manuallyhighlightingthetextandrightclicking“copy”. Amulti-linecodesnippetcanbecopiedbyclickingonthecopyiconorby manuallyhighlightingthetextandrightclicking“copy”. KeyboardCopybutton:ThecopybuttoncanbefocusedbypressingTab.Oncethecopybuttonisinfocus,thecopyfunctionalitycanbeactivatedby pressingeitherSpaceorEnter.Afterthecopybuttonisactivated,thefocusremainsonthebuttonsince thereisnochangeincontext.Showmorebutton:Theghostbuttoninthemulti-linecodesnippetcanbefocusedbypressing Tab.ShowmoreorlesscodebypressingSpaceorEnterwhiletheghostbutton isinfocus.Foradditionalkeyboardinteractions,seethe accessibilitytab.InlineUseinlinecodesnippetswithinbodiesoftext.Usingcodesnippetsinlinehelps createemphasisonimportantkeywordstocopyandmakeslongbodiesoftext easiertoscan.Refrainfromhavinginlinecodesnippetsthatextendtomultiple lines. SinglelineUsesinglelinecodesnippetsforlongerstringsofcodethatcanstillbe presentedononeline. SinglelineoverflowcontentIfthetextinasinglelinecodesnippetislengthy,thetextoverflowsintoa horizontalscroll. Multi-lineUsemulti-linecodesnippetsfordisplayingmultiplelinesofcode. Multi-lineoverflowcontentShowmorebuttonAShowmoreghostbuttoncanbeaddedtoamulti-linecodesnippettoshowmoreorfewer linesofcode.Usethisfunctionalityifyourlayoutistightonspace. VerticalscrollAlternatively,youcanapplyverticalscrollingtothecodesnippetifthereare morethanninelinesofcode.HorizontalscrollTerminalcommandsareoftenlongerstringsandshouldonlyappearononeline. Applyhorizontalscrollingtomaintainthesetwidthoftheboxfortheselonger strings.ModifiersLightUsethelightpropmodifierwhenusingacodesnippetonabackgroundother thantheUIbackgroundforthattheme.Thelightpropchangesthebackground colortokenofthecodesnippetfromfield-01tofield-02. FeedbackHelpusimprovethiscomponentbyprovidingfeedback,askingquestions,and leavinganyothercommentson GitHub.EditthispageonGitHubPreviousComponents:CheckboxNextCodesnippet:Style