Text

Text is used to display text in an interface, and renders a <p> element by default.

Demo

Usage

Import the Text primitive.

Hello world

import { Text } from '@aws-amplify/ui-react';

export const DefaultTextExample = () => <Text>Hello world</Text>;

Variations

Use the variation prop to change the Text variation. Available options are primary, secondary, tertiary, error, warning, info, and success.

Primary

Secondary

Tertiary

Error

Warning

Info

Success

Default

import { Text } from '@aws-amplify/ui-react';

export const TextVariationExample = () => (
  <>
    <Text variation="primary">Primary</Text>
    <Text variation="secondary">Secondary</Text>
    <Text variation="tertiary">Tertiary</Text>
    <Text variation="error">Error</Text>
    <Text variation="warning">Warning</Text>
    <Text variation="info">Info</Text>
    <Text variation="success">Success</Text>
    <Text>Default</Text>
  </>
);

Truncate

The isTruncated prop will render an ellipsis when the text exceeds the defined width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

import { Text } from '@aws-amplify/ui-react';

export const TextTruncatedExample = () => (
  <Text isTruncated={true}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </Text>
);

CSS Styling

Theme

You can customize the appearance of all Text components in your application with a Theme.

Text Theme Source

Default

Primary

Warning

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

const theme: Theme = {
  name: 'text-theme',
  tokens: {
    components: {
      text: {
        color: { value: '{colors.green.80}' },
        primary: {
          color: { value: '{colors.teal.80}' },
        },
        warning: {
          color: { value: '{colors.pink.80}' },
        },
      },
    },
  },
};

export const TextThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex>
      <Text>Default</Text>
      <Text variation="primary">Primary</Text>
      <Text variation="warning">Warning</Text>
    </Flex>
  </ThemeProvider>
);

Target classes

Class	Description
`amplify-text`	Top level element that wraps the Text primitive

--amplify-components-text-color
--amplify-components-text-error-color
--amplify-components-text-info-color
--amplify-components-text-primary-color
--amplify-components-text-secondary-color
--amplify-components-text-success-color
--amplify-components-text-tertiary-color
--amplify-components-text-warning-color

Global styling

To override styling on all Text, you can set the Amplify CSS variables or use the built-in .amplify-text class.

(Revise this example)

This is my styled text

/* styles.css */
.amplify-text {
  --amplify-components-text-color-primary: var(--amplify-colors-red-80);
}

import { Text } from '@aws-amplify/ui-react';

export const GlobalStylingExample = () => (
  <Text className="primary-styled-variable-text" variation="primary">
    This is my styled text
  </Text>
);

Local styling

To override styling on a specific Text, you can use a class selector or style props.

Using a class selector:

This is my styled text

/* styles.css */
.styled-text {
font-weight: var(--amplify-font-weights-bold);
color: var(--amplify-colors-red-80);
text-decoration: underline;
}

import './styles.css';

<Text className="styled-text">This is my styled text</Text>;

Using style props:

This is my styled text

import { Text, useTheme } from '@aws-amplify/ui-react';

export const LocalStylingExample = () => {
  const theme = useTheme();
  return (
    <Text
      fontWeight={theme.tokens.fontWeights.bold}
      color={theme.tokens.colors.red[80]}
      textDecoration="underline"
      as="span"
    >
      This is my styled text
    </Text>
  );
};