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.

Colors

The ActionButton comes in several colors based on the emphasis it needs.

<ActionButton color='primary'>Primary</ActionButton>
<ActionButton color='secondary'>Secondary</ActionButton>
<ActionButton color='primary' isDisabled>Primary</ActionButton>
<ActionButton color='secondary' isDisabled>Secondary</ActionButton>

<ActionButton color="primary">Primary</ActionButton>
<ActionButton color="secondary">Secondary</ActionButton>
<ActionButton color="primary" isDisabled>
  Primary
</ActionButton>
<ActionButton color="secondary" isDisabled>
  Secondary
</ActionButton>

<ActionButton color="primary">
  Primary
</ActionButton>
<ActionButton color="secondary">
  Secondary
</ActionButton>
<ActionButton
  color="primary"
  isDisabled
>
  Primary
</ActionButton>
<ActionButton
  color="secondary"
  isDisabled
>
  Secondary
</ActionButton>

Sizes

The button component comes in three different sizes: small, medium and large. Typically the medium size is recommended, however in certain scenarios changing the emphasis of the button can make sense. If you run into such a situation, you can do so by increasing or decreasing the buttons size.

<ActionButton size='small'>Small</ActionButton>
<ActionButton size='medium'>Medium</ActionButton>
<ActionButton size='large'>Large</ActionButton>

<ActionButton size='small'>Small</ActionButton>
<ActionButton size='medium'>Medium</ActionButton>
<ActionButton size='large'>Large</ActionButton>

<ActionButton size="small">
  Small
</ActionButton>
<ActionButton size="medium">
  Medium
</ActionButton>
<ActionButton size="large">
  Large
</ActionButton>

Events

The button component allows the user to interact with it via touch, keyboard or mouse. To handle all of these, we expose an onPress prop. You can also alternatively pass an onClick prop, however this will omit the keyboard support. As such, the onPress prop is favored over the onClick prop for accessibility.

function Example() {
  const [pressCount, setPressCount] = useState(0);

  const handlePress = () => {
    setPressCount((prevPressCount) => prevPressCount + 1);
  };

  return (
    <ActionButton onPress={handlePress}>{pressCount} Presses</ActionButton>
  );
}

function Example() {
  const [pressCount, setPressCount] = useState(0);

  const handlePress = () => {
    setPressCount((prevPressCount) => prevPressCount + 1);
  };

  return (
    <ActionButton onPress={handlePress}>
      {pressCount} Presses
    </ActionButton>
  );
}

function Example() {
  const [
    pressCount,
    setPressCount
  ] = useState(0);

  const handlePress =
    () => {
      setPressCount((
        prevPressCount
      ) =>
        prevPressCount +
        1
      );
    };

  return (
    <ActionButton
      onPress={handlePress}
    >
      {pressCount}{' '}
      Presses
    </ActionButton>
  );
}

Icons

You can optionally add an icon to the button component. This position of the icon can be adjusted via the iconAlign prop. If there are no children, such as a textual label, in the button, the alignment will be ignored to center the icon properly.

<ActionButton iconName="PlusIcon" iconVariant="solid" iconAlignment="start">
  Create user
</ActionButton>
<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  aria-label="Create user"
/>
<ActionButton iconName="PlusIcon" iconVariant="solid" iconAlignment="end">
  Create user
</ActionButton>

<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  iconAlignment="start"
>
  Create user
</ActionButton>
<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  aria-label="Create user"
/>
<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  iconAlignment="end"
>
  Create user
</ActionButton>

<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  iconAlignment="start"
>
  Create user
</ActionButton>
<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  aria-label="Create user"
/>
<ActionButton
  iconName="PlusIcon"
  iconVariant="solid"
  iconAlignment="end"
>
  Create user
</ActionButton>

Accessibility

If the button does not include a textual label, such as a button that only contains an icon, an aria-label or aria-labelledby prop need to be provided to support assistive technology such as screen readers.

In order to support internationalization, provide a localized string to the children or aria-label prop.

API