Amplify UI

Button

Button allows users to perform actions.

Demo

Usage

Import the Button primitive and styles.

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

<Button>Hello world</Button>;

onClick

Use the onClick prop to add a click handler to the Button.

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

Sizes

Use the size prop to change the Button size. Available options are small, large, and none (default).

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

Variations

Use the variation prop to change the Button variation. Available options are primary, link, menu, warning, destructive and none (default).

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

Color themes

Use the colorTheme prop to change the Button's color theme. Available options are error, info, warning, success, and overlay.

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

The colorTheme prop can be combined with variation to provide more Button options.

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

Icon buttons

Icons can be added to buttons and will adapt to the surrounding font-size.

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

Loading state

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

Other states

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

Accessibility

Setting an aria-label attribute for an icon Button:

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

ButtonGroup

Use a ButtonGroup to group buttons with the same size or variation.

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

ButtonGroup is also a flex container, so any flex props can apply to it for layout purpose. See Flex.

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

Standard HTML attributes

The Button will accept any of the standard HTML attributes that a <button> element accepts. Standard <button> attributes can be found in the MDN Documentation

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

Customization

Theme

You can customize the appearance of all Button components in your application with a Theme.

Button Theme Source

import { Button, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'button-theme',
  tokens: {
    colors: {
      border: {
        // this will affect the default button's border color
        primary: { value: 'black' },
      },
    },
    components: {
      button: {
        // this will affect the font weight of all button variants
        fontWeight: { value: '{fontWeights.extrabold}' },
        backgroundColor: { value: '#f1fff5' },
        borderColor: { value: '{colors.purple.80}' },
        color: { value: '{colors.purple.100}' },
        outlined: {
          info: {
            borderColor: '{colors.purple.60}',
            color: '{colors.purple.90}',
          },
        },

        // style the primary variation
        primary: {
          backgroundColor: { value: '{colors.blue.60}' },
          _hover: {
            backgroundColor: { value: '{colors.blue.80}' },
          },
          _focus: {
            backgroundColor: { value: '{colors.blue.80}' },
          },
          _active: {
            backgroundColor: { value: '{colors.blue.90}' },
          },
          _disabled: {
            backgroundColor: { value: 'transparent' },
            borderColor: { value: '{colors.neutral.30}' },
          },
          error: {
            backgroundColor: { value: '{colors.pink.10}' },
            color: { value: '{colors.red.80}' },
            _hover: {
              backgroundColor: { value: '#a51b34' },
            },
            _focus: {
              backgroundColor: { value: '#9a0c26' },
            },
            _active: {
              backgroundColor: { value: '#9a0c26' },
            },
          },
        },
      },
    },
  },
};

export const ButtonThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex direction="row">
      <Button>Default</Button>
      <Button variation="primary">Primary</Button>
      <Button variation="primary" colorTheme="error">
        Primary error
      </Button>
      <Button variation="primary" isDisabled={true}>
        Primary (disabled)
      </Button>
      <Button colorTheme="info">Default info</Button>
    </Flex>
  </ThemeProvider>
);

Target classes

ClassDescription
amplify-buttonTop level element that wraps the Button primitive
amplify-button__loader-wrapperClass applied to the Loader component within the Button Loading state
  • --amplify-components-button-active-background-color
  • --amplify-components-button-active-border-color
  • --amplify-components-button-active-color
  • --amplify-components-button-background-color
  • --amplify-components-button-border-color
  • --amplify-components-button-border-radius
  • --amplify-components-button-border-style
  • --amplify-components-button-border-width
  • --amplify-components-button-color
  • --amplify-components-button-destructive-active-background-color
  • --amplify-components-button-destructive-active-border-color
  • --amplify-components-button-destructive-active-color
  • --amplify-components-button-destructive-background-color
  • --amplify-components-button-destructive-border-color
  • --amplify-components-button-destructive-border-style
  • --amplify-components-button-destructive-border-width
  • --amplify-components-button-destructive-color
  • --amplify-components-button-destructive-disabled-background-color
  • --amplify-components-button-destructive-disabled-border-color
  • --amplify-components-button-destructive-disabled-color
  • --amplify-components-button-destructive-focus-background-color
  • --amplify-components-button-destructive-focus-border-color
  • --amplify-components-button-destructive-focus-box-shadow
  • --amplify-components-button-destructive-focus-color
  • --amplify-components-button-destructive-hover-background-color
  • --amplify-components-button-destructive-hover-border-color
  • --amplify-components-button-destructive-hover-color
  • --amplify-components-button-destructive-loading-background-color
  • --amplify-components-button-destructive-loading-border-color
  • --amplify-components-button-destructive-loading-color
  • --amplify-components-button-disabled-background-color
  • --amplify-components-button-disabled-border-color
  • --amplify-components-button-disabled-color
  • --amplify-components-button-focus-background-color
  • --amplify-components-button-focus-border-color
  • --amplify-components-button-focus-box-shadow
  • --amplify-components-button-focus-color
  • --amplify-components-button-font-size
  • --amplify-components-button-font-weight
  • --amplify-components-button-hover-background-color
  • --amplify-components-button-hover-border-color
  • --amplify-components-button-hover-color
  • --amplify-components-button-large-font-size
  • --amplify-components-button-large-padding-block-end
  • --amplify-components-button-large-padding-block-start
  • --amplify-components-button-large-padding-inline-end
  • --amplify-components-button-large-padding-inline-start
  • --amplify-components-button-line-height
  • --amplify-components-button-link-active-background-color
  • --amplify-components-button-link-active-border-color
  • --amplify-components-button-link-active-color
  • --amplify-components-button-link-background-color
  • --amplify-components-button-link-border-color
  • --amplify-components-button-link-border-width
  • --amplify-components-button-link-color
  • --amplify-components-button-link-disabled-background-color
  • --amplify-components-button-link-disabled-border-color
  • --amplify-components-button-link-disabled-color
  • --amplify-components-button-link-error-active-background-color
  • --amplify-components-button-link-error-active-border-color
  • --amplify-components-button-link-error-active-color
  • --amplify-components-button-link-error-background-color
  • --amplify-components-button-link-error-border-color
  • --amplify-components-button-link-error-color
  • --amplify-components-button-link-error-focus-background-color
  • --amplify-components-button-link-error-focus-border-color
  • --amplify-components-button-link-error-focus-box-shadow
  • --amplify-components-button-link-error-focus-color
  • --amplify-components-button-link-error-hover-background-color
  • --amplify-components-button-link-error-hover-border-color
  • --amplify-components-button-link-error-hover-color
  • --amplify-components-button-link-focus-background-color
  • --amplify-components-button-link-focus-border-color
  • --amplify-components-button-link-focus-box-shadow
  • --amplify-components-button-link-focus-color
  • --amplify-components-button-link-hover-background-color
  • --amplify-components-button-link-hover-border-color
  • --amplify-components-button-link-hover-color
  • --amplify-components-button-link-info-active-background-color
  • --amplify-components-button-link-info-active-border-color
  • --amplify-components-button-link-info-active-color
  • --amplify-components-button-link-info-background-color
  • --amplify-components-button-link-info-border-color
  • --amplify-components-button-link-info-color
  • --amplify-components-button-link-info-focus-background-color
  • --amplify-components-button-link-info-focus-border-color
  • --amplify-components-button-link-info-focus-box-shadow
  • --amplify-components-button-link-info-focus-color
  • --amplify-components-button-link-info-hover-background-color
  • --amplify-components-button-link-info-hover-border-color
  • --amplify-components-button-link-info-hover-color
  • --amplify-components-button-link-loading-background-color
  • --amplify-components-button-link-loading-border-color
  • --amplify-components-button-link-loading-color
  • --amplify-components-button-link-overlay-active-background-color
  • --amplify-components-button-link-overlay-active-border-color
  • --amplify-components-button-link-overlay-active-color
  • --amplify-components-button-link-overlay-background-color
  • --amplify-components-button-link-overlay-border-color
  • --amplify-components-button-link-overlay-color
  • --amplify-components-button-link-overlay-focus-background-color
  • --amplify-components-button-link-overlay-focus-border-color
  • --amplify-components-button-link-overlay-focus-box-shadow
  • --amplify-components-button-link-overlay-focus-color
  • --amplify-components-button-link-overlay-hover-background-color
  • --amplify-components-button-link-overlay-hover-border-color
  • --amplify-components-button-link-overlay-hover-color
  • --amplify-components-button-link-success-active-background-color
  • --amplify-components-button-link-success-active-border-color
  • --amplify-components-button-link-success-active-color
  • --amplify-components-button-link-success-background-color
  • --amplify-components-button-link-success-border-color
  • --amplify-components-button-link-success-color
  • --amplify-components-button-link-success-focus-background-color
  • --amplify-components-button-link-success-focus-border-color
  • --amplify-components-button-link-success-focus-box-shadow
  • --amplify-components-button-link-success-focus-color
  • --amplify-components-button-link-success-hover-background-color
  • --amplify-components-button-link-success-hover-border-color
  • --amplify-components-button-link-success-hover-color
  • --amplify-components-button-link-warning-active-background-color
  • --amplify-components-button-link-warning-active-border-color
  • --amplify-components-button-link-warning-active-color
  • --amplify-components-button-link-warning-background-color
  • --amplify-components-button-link-warning-border-color
  • --amplify-components-button-link-warning-color
  • --amplify-components-button-link-warning-focus-background-color
  • --amplify-components-button-link-warning-focus-border-color
  • --amplify-components-button-link-warning-focus-box-shadow
  • --amplify-components-button-link-warning-focus-color
  • --amplify-components-button-link-warning-hover-background-color
  • --amplify-components-button-link-warning-hover-border-color
  • --amplify-components-button-link-warning-hover-color
  • --amplify-components-button-loader-wrapper-align-items
  • --amplify-components-button-loader-wrapper-gap
  • --amplify-components-button-loading-background-color
  • --amplify-components-button-loading-border-color
  • --amplify-components-button-loading-color
  • --amplify-components-button-menu-active-background-color
  • --amplify-components-button-menu-active-color
  • --amplify-components-button-menu-background-color
  • --amplify-components-button-menu-border-width
  • --amplify-components-button-menu-disabled-color
  • --amplify-components-button-menu-focus-background-color
  • --amplify-components-button-menu-focus-color
  • --amplify-components-button-menu-hover-background-color
  • --amplify-components-button-menu-hover-color
  • --amplify-components-button-menu-justify-content
  • --amplify-components-button-outlined-error-active-background-color
  • --amplify-components-button-outlined-error-active-border-color
  • --amplify-components-button-outlined-error-active-color
  • --amplify-components-button-outlined-error-background-color
  • --amplify-components-button-outlined-error-border-color
  • --amplify-components-button-outlined-error-color
  • --amplify-components-button-outlined-error-focus-background-color
  • --amplify-components-button-outlined-error-focus-border-color
  • --amplify-components-button-outlined-error-focus-box-shadow
  • --amplify-components-button-outlined-error-focus-color
  • --amplify-components-button-outlined-error-hover-background-color
  • --amplify-components-button-outlined-error-hover-border-color
  • --amplify-components-button-outlined-error-hover-color
  • --amplify-components-button-outlined-info-active-background-color
  • --amplify-components-button-outlined-info-active-border-color
  • --amplify-components-button-outlined-info-active-color
  • --amplify-components-button-outlined-info-background-color
  • --amplify-components-button-outlined-info-border-color
  • --amplify-components-button-outlined-info-color
  • --amplify-components-button-outlined-info-focus-background-color
  • --amplify-components-button-outlined-info-focus-border-color
  • --amplify-components-button-outlined-info-focus-box-shadow
  • --amplify-components-button-outlined-info-focus-color
  • --amplify-components-button-outlined-info-hover-background-color
  • --amplify-components-button-outlined-info-hover-border-color
  • --amplify-components-button-outlined-info-hover-color
  • --amplify-components-button-outlined-overlay-active-background-color
  • --amplify-components-button-outlined-overlay-active-border-color
  • --amplify-components-button-outlined-overlay-active-color
  • --amplify-components-button-outlined-overlay-background-color
  • --amplify-components-button-outlined-overlay-border-color
  • --amplify-components-button-outlined-overlay-color
  • --amplify-components-button-outlined-overlay-focus-background-color
  • --amplify-components-button-outlined-overlay-focus-border-color
  • --amplify-components-button-outlined-overlay-focus-box-shadow
  • --amplify-components-button-outlined-overlay-focus-color
  • --amplify-components-button-outlined-overlay-hover-background-color
  • --amplify-components-button-outlined-overlay-hover-border-color
  • --amplify-components-button-outlined-overlay-hover-color
  • --amplify-components-button-outlined-success-active-background-color
  • --amplify-components-button-outlined-success-active-border-color
  • --amplify-components-button-outlined-success-active-color
  • --amplify-components-button-outlined-success-background-color
  • --amplify-components-button-outlined-success-border-color
  • --amplify-components-button-outlined-success-color
  • --amplify-components-button-outlined-success-focus-background-color
  • --amplify-components-button-outlined-success-focus-border-color
  • --amplify-components-button-outlined-success-focus-box-shadow
  • --amplify-components-button-outlined-success-focus-color
  • --amplify-components-button-outlined-success-hover-background-color
  • --amplify-components-button-outlined-success-hover-border-color
  • --amplify-components-button-outlined-success-hover-color
  • --amplify-components-button-outlined-warning-active-background-color
  • --amplify-components-button-outlined-warning-active-border-color
  • --amplify-components-button-outlined-warning-active-color
  • --amplify-components-button-outlined-warning-background-color
  • --amplify-components-button-outlined-warning-border-color
  • --amplify-components-button-outlined-warning-color
  • --amplify-components-button-outlined-warning-focus-background-color
  • --amplify-components-button-outlined-warning-focus-border-color
  • --amplify-components-button-outlined-warning-focus-box-shadow
  • --amplify-components-button-outlined-warning-focus-color
  • --amplify-components-button-outlined-warning-hover-background-color
  • --amplify-components-button-outlined-warning-hover-border-color
  • --amplify-components-button-outlined-warning-hover-color
  • --amplify-components-button-padding-block-end
  • --amplify-components-button-padding-block-start
  • --amplify-components-button-padding-inline-end
  • --amplify-components-button-padding-inline-start
  • --amplify-components-button-primary-active-background-color
  • --amplify-components-button-primary-active-border-color
  • --amplify-components-button-primary-active-color
  • --amplify-components-button-primary-background-color
  • --amplify-components-button-primary-border-color
  • --amplify-components-button-primary-border-style
  • --amplify-components-button-primary-border-width
  • --amplify-components-button-primary-color
  • --amplify-components-button-primary-disabled-background-color
  • --amplify-components-button-primary-disabled-border-color
  • --amplify-components-button-primary-disabled-color
  • --amplify-components-button-primary-error-active-background-color
  • --amplify-components-button-primary-error-active-border-color
  • --amplify-components-button-primary-error-active-color
  • --amplify-components-button-primary-error-background-color
  • --amplify-components-button-primary-error-border-color
  • --amplify-components-button-primary-error-color
  • --amplify-components-button-primary-error-focus-background-color
  • --amplify-components-button-primary-error-focus-border-color
  • --amplify-components-button-primary-error-focus-box-shadow
  • --amplify-components-button-primary-error-focus-color
  • --amplify-components-button-primary-error-hover-background-color
  • --amplify-components-button-primary-error-hover-border-color
  • --amplify-components-button-primary-error-hover-color
  • --amplify-components-button-primary-focus-background-color
  • --amplify-components-button-primary-focus-border-color
  • --amplify-components-button-primary-focus-box-shadow
  • --amplify-components-button-primary-focus-color
  • --amplify-components-button-primary-hover-background-color
  • --amplify-components-button-primary-hover-border-color
  • --amplify-components-button-primary-hover-color
  • --amplify-components-button-primary-info-active-background-color
  • --amplify-components-button-primary-info-active-border-color
  • --amplify-components-button-primary-info-active-color
  • --amplify-components-button-primary-info-background-color
  • --amplify-components-button-primary-info-border-color
  • --amplify-components-button-primary-info-color
  • --amplify-components-button-primary-info-focus-background-color
  • --amplify-components-button-primary-info-focus-border-color
  • --amplify-components-button-primary-info-focus-box-shadow
  • --amplify-components-button-primary-info-focus-color
  • --amplify-components-button-primary-info-hover-background-color
  • --amplify-components-button-primary-info-hover-border-color
  • --amplify-components-button-primary-info-hover-color
  • --amplify-components-button-primary-loading-background-color
  • --amplify-components-button-primary-loading-border-color
  • --amplify-components-button-primary-loading-color
  • --amplify-components-button-primary-overlay-active-background-color
  • --amplify-components-button-primary-overlay-active-border-color
  • --amplify-components-button-primary-overlay-active-color
  • --amplify-components-button-primary-overlay-background-color
  • --amplify-components-button-primary-overlay-border-color
  • --amplify-components-button-primary-overlay-color
  • --amplify-components-button-primary-overlay-focus-background-color
  • --amplify-components-button-primary-overlay-focus-border-color
  • --amplify-components-button-primary-overlay-focus-box-shadow
  • --amplify-components-button-primary-overlay-focus-color
  • --amplify-components-button-primary-overlay-hover-background-color
  • --amplify-components-button-primary-overlay-hover-border-color
  • --amplify-components-button-primary-overlay-hover-color
  • --amplify-components-button-primary-success-active-background-color
  • --amplify-components-button-primary-success-active-border-color
  • --amplify-components-button-primary-success-active-color
  • --amplify-components-button-primary-success-background-color
  • --amplify-components-button-primary-success-border-color
  • --amplify-components-button-primary-success-color
  • --amplify-components-button-primary-success-focus-background-color
  • --amplify-components-button-primary-success-focus-border-color
  • --amplify-components-button-primary-success-focus-box-shadow
  • --amplify-components-button-primary-success-focus-color
  • --amplify-components-button-primary-success-hover-background-color
  • --amplify-components-button-primary-success-hover-border-color
  • --amplify-components-button-primary-success-hover-color
  • --amplify-components-button-primary-warning-active-background-color
  • --amplify-components-button-primary-warning-active-border-color
  • --amplify-components-button-primary-warning-active-color
  • --amplify-components-button-primary-warning-background-color
  • --amplify-components-button-primary-warning-border-color
  • --amplify-components-button-primary-warning-color
  • --amplify-components-button-primary-warning-focus-background-color
  • --amplify-components-button-primary-warning-focus-border-color
  • --amplify-components-button-primary-warning-focus-box-shadow
  • --amplify-components-button-primary-warning-focus-color
  • --amplify-components-button-primary-warning-hover-background-color
  • --amplify-components-button-primary-warning-hover-border-color
  • --amplify-components-button-primary-warning-hover-color
  • --amplify-components-button-small-font-size
  • --amplify-components-button-small-padding-block-end
  • --amplify-components-button-small-padding-block-start
  • --amplify-components-button-small-padding-inline-end
  • --amplify-components-button-small-padding-inline-start
  • --amplify-components-button-transition-duration
  • --amplify-components-button-warning-active-background-color
  • --amplify-components-button-warning-active-border-color
  • --amplify-components-button-warning-active-color
  • --amplify-components-button-warning-background-color
  • --amplify-components-button-warning-border-color
  • --amplify-components-button-warning-border-width
  • --amplify-components-button-warning-color
  • --amplify-components-button-warning-disabled-background-color
  • --amplify-components-button-warning-disabled-border-color
  • --amplify-components-button-warning-disabled-color
  • --amplify-components-button-warning-focus-background-color
  • --amplify-components-button-warning-focus-border-color
  • --amplify-components-button-warning-focus-box-shadow
  • --amplify-components-button-warning-focus-color
  • --amplify-components-button-warning-hover-background-color
  • --amplify-components-button-warning-hover-border-color
  • --amplify-components-button-warning-hover-color
  • --amplify-components-button-warning-loading-background-color
  • --amplify-components-button-warning-loading-border-color
  • --amplify-components-button-warning-loading-color

CSS

To override styling on all Buttons, you can set the Amplify CSS variables or use the built-in .amplify-button class.

/* styles.css */
[data-amplify-theme] {
  --amplify-components-button-primary-background-color: #0057ff;
  --amplify-components-button-primary-hover-background-color: #4d89fc;
}
/* OR */
.amplify-button {
  background-color: #0057ff;
}
.amplify-button:hover {
  background-color: #4d89fc;
}

To replace the Button styling, unset it:

.amplify-button {
  all: unset;
  /* Add your styling here*/
}

Local styling

To override styling on a specific Button, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

Using a class selector:

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

Using data attributes:

/* styles.css */
/* Override only primary variation styles */
.amplify-button[data-variation='primary'] {
  background-color: teal;
  color: white;
}

/* Override loading styles */
.amplify-button[data-loading='true'] {
  opacity: 0.8;
}

/* Override disabled styles */
.amplify-button[disabled='true'] {
  opacity: 0.8;
}
import './styles.css';

<Button variation="primary">Teal background</Button>
<Button isLoading={true}>Loading...</Button>
<Button isDisabled={true}>Lighter opacity</Button>

Using style props:

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

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.