Skip to main content
U.S. Flag

An official website of the United States government


Providing your own internationalized content

The design system attempts to make all of its components' text content assignable through their React props. That means you can use your own internationalization solutions to provide the content in your applications. Here is an example:

// Example of an application providing its own internationalized content

import { Alert } from '@cmsgov/design-system';
import i18n from 'i18n';

export default function () {
  return <Alert heading={i18n('success')}>{i18n('account.created')}</Alert>;

Default internationalized content in the design system

While we want components to be flexible, we also want them to be easy to use, so for some components we do provide default content. Some of this content comes in both English and Spanish, but our goal is to have Spanish translations for all default content in the near future.

For applications that have a lang attribute on their html element, the language will be detected automatically. If that language is not English or Spanish, the language of the design system will fall back to English. If automatic language detection does not work for your use case, the language can be set manually through the setLanguage function. Similarly, the current language can also be read from the getLanguage function. Here's an example:

import { getLanguage, setLanguage } from '@cmsgov/design-system';

// Set the design system language to something other than the document's detected language

// Get the design system's current language

Deprecated per-component langauge props

You may notice that some components accept an older `language` or `locale` prop to set the language of the content on a per-component basis, but these per-component props have been deprecated and will be removed in a future breaking-change release.