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