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.

React source Feedback

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>
  );
};