Button

import { Button } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; <Button>Hello world</Button>; 

<Button onClick={() => alert('👋 hello')}>Click me</Button> 

<Button size="small">Small</Button> <Button>Default</Button> <Button size="large">Large</Button> 

<Button>Default</Button> <Button variation="primary">Primary</Button> <Button variation="link">Link</Button> 

<Button>Default</Button> <Button colorTheme="success">Success</Button> <Button colorTheme="warning">Warning</Button> <Button colorTheme="error">Error</Button> <Button colorTheme="warning">Info</Button> <Button colorTheme="overlay">Overlay</Button> 

// Primary variation with color themes <Button variation="primary" colorTheme="success">Success</Button> <Button variation="primary" colorTheme="error">error</Button> <Button variation="primary" colorTheme="warning">Warning</Button> <Button variation="primary" colorTheme="info">Info</Button> <Button variation="primary" colorTheme="overlay">Overlay</Button> // Link variation with color themes <Button variation="link" colorTheme="success">Success</Button> <Button variation="link" colorTheme="error">error</Button> <Button variation="link" colorTheme="warning">Warning</Button> <Button variation="link" colorTheme="info">Info</Button> <Button variation="link" colorTheme="overlay">Overlay</Button> 

import * as React from 'react'; import { Button, Flex, Icon, View } from '@aws-amplify/ui-react'; const IconSave = () => { return ( <Icon ariaLabel="" pathData="M17 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V7L17 3ZM19 19H5V5H16.17L19 7.83V19ZM12 12C10.34 12 9 13.34 9 15C9 16.66 10.34 18 12 18C13.66 18 15 16.66 15 15C15 13.34 13.66 12 12 12ZM6 6H15V10H6V6Z" /> ); }; export const IconButtonExample = () => { return ( <Flex direction="column" gap="1rem"> <View> <Button gap="0.1rem" size="small"> <IconSave /> Save </Button> <Button gap="0.2rem"> <IconSave /> Save </Button> <Button gap="0.2rem" size="large"> <IconSave /> Save </Button> </View> <View> <Button size="small"> <IconSave /> </Button> <Button> <IconSave /> </Button> <Button size="large"> <IconSave /> </Button> </View> </Flex> ); }; 

<Button isLoading={true} loadingText="Loading..." variation="primary"> Hello </Button> 

<Button isDisabled={true}>Disabled</Button> <Button isFullWidth={true}>Full width</Button> 

<Button ariaLabel="To the moon!">🚀</Button> 

import { Button, ButtonGroup } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; // same size <ButtonGroup size="small"> <Button>🚀</Button> <Button>🚀</Button> <Button>🚀</Button> </ButtonGroup>; // same variation <ButtonGroup variation="primary"> <Button>🚀</Button> <Button>🚀</Button> <Button>🚀</Button> </ButtonGroup>; 

import { Button, ButtonGroup } from '@aws-amplify/ui-react'; import '@aws-amplify/ui-react/styles.css'; <ButtonGroup justifyContent="center"> <Button>🚀</Button> <Button>🚀</Button> <Button>🚀</Button> </ButtonGroup> <ButtonGroup direction="column"> <Button>🚀</Button> <Button>🚀</Button> <Button>🚀</Button> </ButtonGroup>; 

<Button name="named">Named</Button> 

/* Example: class selector styling override */ .colorful-button { background: linear-gradient(90deg, #fdbb2d 0%, #22c1c3 100%); } 

import './styles.css'; <Button className="colorful-button">I'm colorful!</Button>; 

<Button style={{ backgroundColor: 'green', color: 'white' }}>Green</Button>; { /* OR */ } <Button backgroundColor="purple" color="white"> Purple </Button>;