Placeholder

Placeholder can be used to fill out an interface while the content is loading.

Demo

Usage

Import the Placeholder component.

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

export const DefaultPlaceholderExample = () => {
  return <Placeholder />;
};

isLoaded

Use isLoaded prop to indicate whether or not the content is loaded.

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

export const PlaceholderIsLoadedExample = () => {
  return <Placeholder isLoaded={true} />;
};

Sizes

Use the size prop to change the Placeholder size. Available options are small, large, and none (default).

import { Flex, Placeholder } from '@aws-amplify/ui-react';

export const PlaceholderSizeExample = () => {
  return (
    <Flex direction="column">
      <Placeholder size="small" />
      <Placeholder />
      <Placeholder size="large" />
    </Flex>
  );
};

Colors

Pass startColor and endColor props to color your own Placeholder.

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

export const PlaceholderColorExample = () => {
  const { tokens } = useTheme();
  return (
    <Placeholder
      startColor={tokens.colors.neutral[80]}
      endColor={tokens.colors.teal[40]}
    />
  );
};

Customization

Theme

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

Placeholder Theme Source

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

const theme: Theme = {
  name: 'placeholder-theme',
  tokens: {
    components: {
      placeholder: {
        transitionDuration: { value: '1250ms' },
        startColor: { value: '{colors.blue.40}' },
        endColor: { value: '{colors.blue.80}' },
        borderRadius: { value: '{radii.large}' },
        large: {
          height: { value: '{space.xxxl}' },
        },
      },
    },
  },
};

export const PlaceholderThemeExample = () => {
  return (
    <ThemeProvider theme={theme} colorMode="light">
      <Placeholder size="large" />
    </ThemeProvider>
  );
};

Target classes

Class	Description
`amplify-placeholder`	Top level element that wraps the Placeholder primitive

--amplify-components-placeholder-border-radius
--amplify-components-placeholder-default-height
--amplify-components-placeholder-end-color
--amplify-components-placeholder-large-height
--amplify-components-placeholder-small-height
--amplify-components-placeholder-start-color
--amplify-components-placeholder-transition-duration

Global styling

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

/* styles.css */
[data-amplify-theme] {
  --amplify-components-placeholder-height: var(--amplify-space-xl);
  --amplify-components-placeholder-border-radius: var(--amplify-space-medium);
}
/* OR */
.amplify-placeholder {
  height: var(--amplify-space-xl);
  border-radius: var(--amplify-space-medium);
}

<Placeholder />

Local styling

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

Using a class selector:

Set the starting and ending colors for the Placeholder animation using a custom CSS class with the Amplify CSS variables:

/* styles.css */
.placeholder-local-styles {
  --amplify-components-placeholder-start-color: var(--amplify-colors-purple-80);
  --amplify-components-placeholder-end-color: var(--amplify-colors-blue-80);
}

import './styles.css';

<Placeholder className="placeholder-local-styles" />

Using style props:

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

export const PlaceholderStylePropsExample = () => {
  return <Placeholder height="123px" width="50%" />;
};