GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Language toggle
<gcds-lang-toggle>

Also called: language switch, language selector. The language toggle is a link to the same content in the other Official Language.
  • Required on Canada.ca
  • Required on GC sites
  • GitHub
  • Figma

Language toggle component preview

Language toggle is a required component for Government of Canada websites and has specific requirements for Canada.ca pages. Take a look at use cases for the language toggle to see if it fits the problem you’re solving for.

Problems the language toggle solves

Use the language toggle to:
  • Make sure people are able to switch between languages without losing track of where they were before switching.
  • Support Official Languages by offering equitable access in French and English.
Header for placing the Government of Canada branded header landmark.
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2025-05-06