Amplify UI

Internationalization (i18n)

How to build localized apps with Amplify UI.

What's included?

Amplify UI components follow Web Standards with all components with the aim of making internationalization straightforward. We use logical properties for margins, borders, and padding. An example would be our use of padding-inline-start and padding-inline-end CSS properties in the default theme which ensure paddings are flipped when the language direction is changed. In addition, Flex and Grid will both honor the language direction and flip the layout as well due to the underlying use of CSS Flexbox and Grid Layout APIs.

Changing the language direction

To change the directionality of the text and layout in your application to right to left (RTL), add the direction prop with value rtl to your ThemeProvider:

import { Alert, Text, ThemeProvider } from '@aws-amplify/ui-react';
import { useState } from 'react';

export const ThemeProviderDirectionExample = () => {
  return (
    <>
      <ThemeProvider>
        <Alert
          variation="info"
          isDismissible={false}
          hasIcon={true}
          heading="Left to Right"
        >
          <Text>
            This paragraph is in English, so it should go from left to right.
          </Text>
        </Alert>
      </ThemeProvider>
      <ThemeProvider direction="rtl">
        <Alert
          variation="success"
          isDismissible={false}
          hasIcon={true}
          heading="Right to Left"
        >
          <Text>
            هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
          </Text>
        </Alert>
      </ThemeProvider>
    </>
  );
};

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.