Amplify UI

View

View is the foundational component for Amplify UI primitives. While View renders a <div> by default, it can render any HTML element and supports styling via props.

Demo

Usage

Import the View component.

Nice view! 🏔
import { View } from '@aws-amplify/ui-react';

export const DefaultViewExample = () => {
  return <View>Nice view! 🏔</View>;
};

Set rendered HTML element

To change the HTML element rendered by the View, use the as prop. View renders a <div> by default.

I am a section
import { View } from '@aws-amplify/ui-react';

export const SetRenderedHTML = () => {
  return <View as="section">I am a section</View>;
};

Disabled state

To mark a View as disabled, pass the isDisabled prop.

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

export const DisabledStateExample = () => {
  return (
    <View
      as="button"
      isDisabled={true}
      onClick={() => alert("This won't fire 🚫")}
    >
      You cannot click me!
    </View>
  );
};

Accessibility

The example below demonstrates setting an aria-label attribute and role for an icon button.

import { View } from '@aws-amplify/ui-react';
import { MdAccessibility } from 'react-icons/md';

export const AccessibilityExample = () => {
  return (
    <View
      ariaLabel="So accessible!"
      role="button"
      onClick={() => alert('Hooray for accessbility!')}
    >
      <MdAccessibility />
    </View>
  );
};

Standard HTML attributes

View will accept any of the standard HTML attributes that its underlying HTML element accepts.

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

export const CustomAttributesExample = () => {
  return <View as="progress" data-progress-bar max="100" value="75" />;
};

CSS Styling

Local styling

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

Using a class selector:

/* styles.css */
.mountain-view {
  background-color: #b7daf9;
  display: block;
  font-size: 5em;
  text-align: center;
}
import { View } from '@aws-amplify/ui-react';
import './styles.css';

export const ClassNameExample = () => {
  return <View className="mountain-view">🏔</View>;
};
🏔

Using style props:

🌲🌲🌲 🏕 🌲🌲🌲
import { View, useTheme } from '@aws-amplify/ui-react';

export const StylePropsExample = () => {
  const { tokens } = useTheme();

  return (
    <View
      backgroundColor={tokens.colors.green[20]}
      borderRadius={tokens.radii.large}
      fontSize={tokens.fontSizes.xxxxl}
      textAlign="center"
    >
      🌲🌲🌲 🏕 🌲🌲🌲
    </View>
  );
};

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.