Button

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

Example#

<Button variant="accent">Save</Button>

<Button variant="accent">Save</Button>

<Button variant="accent">
  Save
</Button>

Content#

Buttons must have a visible label, and can optionally have an icon. Text only buttons accept a string as children. Icons can also be added as children, with a sibling Text element for the label.

import {Text} from '@adobe/react-spectrum';

<Button variant="primary">
  <Bell />
  <Text>Icon + Label</Text>
</Button>

import {Text} from '@adobe/react-spectrum';

<Button variant="primary">
  <Bell />
  <Text>Icon + Label</Text>
</Button>

import {Text} from '@adobe/react-spectrum';

<Button variant="primary">
  <Bell />
  <Text>
    Icon + Label
  </Text>
</Button>

Accessibility#

If no visible label is provided (e.g. an icon only button), an alternative text label must be provided to identify the control for accessibility. This should be added using the aria-label prop.

Internationalization#

In order to internationalize a button, a localized string should be passed to the children or aria-label prop.

Events#

Buttons support user interactions via mouse, keyboard, and touch. You can handle all of these via the onPress prop.

The following example uses an onPress handler to update a counter stored in React state.

function Example() {
  let [count, setCount] = React.useState(0);

  return (
    <Button variant="primary" onPress={() => setCount((c) => c + 1)}>
      {count} Dogs
    </Button>
  );
}

function Example() {
  let [count, setCount] = React.useState(0);

  return (
    <Button
      variant="primary"
      onPress={() => setCount((c) => c + 1)}
    >
      {count} Dogs
    </Button>
  );
}

function Example() {
  let [count, setCount] =
    React.useState(0);

  return (
    <Button
      variant="primary"
      onPress={() =>
        setCount((c) =>
          c + 1
        )}
    >
      {count} Dogs
    </Button>
  );
}

Pending#

Buttons can indicate that a quick progress task is taking place (e.g., saving settings on a server). After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon. You can trigger this behavior with the isPending prop. Button events are disabled while isPending is true.

function Example() {
  let [isLoading, setIsLoading] = React.useState(false);

  let handlePress = () => {
    // Trigger button pending state
    setIsLoading(true);

    setTimeout(() => {
      // Cancel button pending state
      setIsLoading(false);
    }, 3000);
  };

  return (
    <Button variant="primary" isPending={isLoading} onPress={handlePress}>
      Click me!
    </Button>
  );
}

function Example() {
  let [isLoading, setIsLoading] = React.useState(false);

  let handlePress = () => {
    // Trigger button pending state
    setIsLoading(true);

    setTimeout(() => {
      // Cancel button pending state
      setIsLoading(false);
    }, 3000);
  };

  return (
    <Button
      variant="primary"
      isPending={isLoading}
      onPress={handlePress}
    >
      Click me!
    </Button>
  );
}

function Example() {
  let [
    isLoading,
    setIsLoading
  ] = React.useState(
    false
  );

  let handlePress =
    () => {
      // Trigger button pending state
      setIsLoading(true);

      setTimeout(() => {
        // Cancel button pending state
        setIsLoading(
          false
        );
      }, 3000);
    };

  return (
    <Button
      variant="primary"
      isPending={isLoading}
      onPress={handlePress}
    >
      Click me!
    </Button>
  );
}

Props#

Visual options#

Accent#

View guidelines

<Flex wrap gap="size-250">
  <Button variant="accent" style="fill">Save</Button>
  <Button variant="accent" style="outline">Save</Button>
</Flex>

<Flex wrap gap="size-250">
  <Button variant="accent" style="fill">Save</Button>
  <Button variant="accent" style="outline">Save</Button>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <Button
    variant="accent"
    style="fill"
  >
    Save
  </Button>
  <Button
    variant="accent"
    style="outline"
  >
    Save
  </Button>
</Flex>

Primary#

View guidelines

<Flex wrap gap="size-250">
  <Button variant="primary" style="fill">Save</Button>
  <Button variant="primary" style="outline">Save</Button>
</Flex>

<Flex wrap gap="size-250">
  <Button variant="primary" style="fill">Save</Button>
  <Button variant="primary" style="outline">Save</Button>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <Button
    variant="primary"
    style="fill"
  >
    Save
  </Button>
  <Button
    variant="primary"
    style="outline"
  >
    Save
  </Button>
</Flex>

Secondary#

View guidelines

<Flex wrap gap="size-250">
  <Button variant="secondary" style="fill">Save</Button>
  <Button variant="secondary" style="outline">Save</Button>
</Flex>

<Flex wrap gap="size-250">
  <Button variant="secondary" style="fill">Save</Button>
  <Button variant="secondary" style="outline">Save</Button>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <Button
    variant="secondary"
    style="fill"
  >
    Save
  </Button>
  <Button
    variant="secondary"
    style="outline"
  >
    Save
  </Button>
</Flex>

Negative#

View guidelines

<Flex wrap gap="size-250">
  <Button variant="negative" style="fill">Save</Button>
  <Button variant="negative" style="outline">Save</Button>
</Flex>

<Flex wrap gap="size-250">
  <Button variant="negative" style="fill">Save</Button>
  <Button variant="negative" style="outline">Save</Button>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <Button
    variant="negative"
    style="fill"
  >
    Save
  </Button>
  <Button
    variant="negative"
    style="outline"
  >
    Save
  </Button>
</Flex>

Static color#

View guidelines

<Flex wrap gap="size-250">
  <View backgroundColor="static-blue-700" padding="size-500">
    <Flex wrap gap="size-200">
      <Button variant="primary" staticColor="white" style="fill">Save</Button>
      <Button variant="primary" staticColor="white" style="outline">
        Save
      </Button>
    </Flex>
  </View>
  <View backgroundColor="static-yellow-400" padding="size-500">
    <Flex wrap gap="size-200">
      <Button variant="primary" staticColor="black" style="fill">Save</Button>
      <Button variant="primary" staticColor="black" style="outline">
        Save
      </Button>
    </Flex>
  </View>
</Flex>

<Flex wrap gap="size-250">
  <View
    backgroundColor="static-blue-700"
    padding="size-500"
  >
    <Flex wrap gap="size-200">
      <Button
        variant="primary"
        staticColor="white"
        style="fill"
      >
        Save
      </Button>
      <Button
        variant="primary"
        staticColor="white"
        style="outline"
      >
        Save
      </Button>
    </Flex>
  </View>
  <View
    backgroundColor="static-yellow-400"
    padding="size-500"
  >
    <Flex wrap gap="size-200">
      <Button
        variant="primary"
        staticColor="black"
        style="fill"
      >
        Save
      </Button>
      <Button
        variant="primary"
        staticColor="black"
        style="outline"
      >
        Save
      </Button>
    </Flex>
  </View>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <View
    backgroundColor="static-blue-700"
    padding="size-500"
  >
    <Flex
      wrap
      gap="size-200"
    >
      <Button
        variant="primary"
        staticColor="white"
        style="fill"
      >
        Save
      </Button>
      <Button
        variant="primary"
        staticColor="white"
        style="outline"
      >
        Save
      </Button>
    </Flex>
  </View>
  <View
    backgroundColor="static-yellow-400"
    padding="size-500"
  >
    <Flex
      wrap
      gap="size-200"
    >
      <Button
        variant="primary"
        staticColor="black"
        style="fill"
      >
        Save
      </Button>
      <Button
        variant="primary"
        staticColor="black"
        style="outline"
      >
        Save
      </Button>
    </Flex>
  </View>
</Flex>

Disabled#

View guidelines

<Button variant="accent" isDisabled>Save</Button>

<Button variant="accent" isDisabled>Save</Button>

<Button
  variant="accent"
  isDisabled
>
  Save
</Button>

Icon only#

View guidelines

<Flex direction="row" gap={8}>
  <Button variant="accent" aria-label="Ring for service"><Bell /></Button>
  <Button variant="primary" aria-label="Ring for service"><Bell /></Button>
  <Button variant="secondary" aria-label="Ring for service"><Bell /></Button>
</Flex>

<Flex direction="row" gap={8}>
  <Button variant="accent" aria-label="Ring for service">
    <Bell />
  </Button>
  <Button variant="primary" aria-label="Ring for service">
    <Bell />
  </Button>
  <Button
    variant="secondary"
    aria-label="Ring for service"
  >
    <Bell />
  </Button>
</Flex>

<Flex
  direction="row"
  gap={8}
>
  <Button
    variant="accent"
    aria-label="Ring for service"
  >
    <Bell />
  </Button>
  <Button
    variant="primary"
    aria-label="Ring for service"
  >
    <Bell />
  </Button>
  <Button
    variant="secondary"
    aria-label="Ring for service"
  >
    <Bell />
  </Button>
</Flex>