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