ActionButton

ActionButtons allow users to perform an action. They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.

Example#

<ActionButton>Edit</ActionButton>

<ActionButton>Edit</ActionButton>

<ActionButton>
  Edit
</ActionButton>

Content#

ActionButtons can have a label, an icon, or both. An icon is provided by passing an icon component as a child to the ActionButton. A visible label can be provided by passing a string or a Text component as a child, depending on whether the ActionButton has an accompanying icon.

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

<ActionButton>
  <Edit />
  <Text>Icon + Label</Text>
</ActionButton>

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

<ActionButton>
  <Edit />
  <Text>Icon + Label</Text>
</ActionButton>

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

<ActionButton>
  <Edit />
  <Text>
    Icon + Label
  </Text>
</ActionButton>

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.

<ActionButton aria-label="Icon only">
  <Edit />
</ActionButton>

<ActionButton aria-label="Icon only">
  <Edit />
</ActionButton>

<ActionButton aria-label="Icon only">
  <Edit />
</ActionButton>

Internationalization#

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

Events#

ActionButtons 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 (
    <ActionButton onPress={() => setCount((c) => c + 1)}>
      {count} Edits
    </ActionButton>
  );
}

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

  return (
    <ActionButton onPress={() => setCount((c) => c + 1)}>
      {count} Edits
    </ActionButton>
  );
}

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

  return (
    <ActionButton
      onPress={() =>
        setCount((c) =>
          c + 1
        )}
    >
      {count} Edits
    </ActionButton>
  );
}

Props#

Visual options#

Quiet#

View guidelines

<ActionButton isQuiet>Action!</ActionButton>

<ActionButton isQuiet>Action!</ActionButton>

<ActionButton isQuiet>
  Action!
</ActionButton>

Disabled#

View guidelines

<ActionButton isDisabled>Action!</ActionButton>

<ActionButton isDisabled>Action!</ActionButton>

<ActionButton
  isDisabled
>
  Action!
</ActionButton>

Static color#

The staticColor prop can be used when an ActionButton is displayed over a color background. You are responsible for choosing the static color variant that ensures the text meets an accessible contrast ratio with the background.

<Flex wrap gap="size-250">
  <View backgroundColor="static-blue-700" padding="size-500">
    <ActionButton staticColor="white">
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
  <View backgroundColor="static-yellow-400" padding="size-500">
    <ActionButton staticColor="black" isQuiet>
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
</Flex>

<Flex wrap gap="size-250">
  <View
    backgroundColor="static-blue-700"
    padding="size-500"
  >
    <ActionButton staticColor="white">
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
  <View
    backgroundColor="static-yellow-400"
    padding="size-500"
  >
    <ActionButton staticColor="black" isQuiet>
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
</Flex>

<Flex
  wrap
  gap="size-250"
>
  <View
    backgroundColor="static-blue-700"
    padding="size-500"
  >
    <ActionButton staticColor="white">
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
  <View
    backgroundColor="static-yellow-400"
    padding="size-500"
  >
    <ActionButton
      staticColor="black"
      isQuiet
    >
      <Edit />
      <Text>Edit</Text>
    </ActionButton>
  </View>
</Flex>