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.

children

size

staticColor

isQuiet

isDisabled

import {ActionButton} from '@react-spectrum/s2';

<ActionButton>Action</ActionButton>

Events

Use the onPress prop to handle interactions via mouse, keyboard, and touch. The onPressStart, onPressEnd, and onPressChange events are also emitted as the user interacts with the button.

import {ActionButton} from '@react-spectrum/s2';
import {useState} from 'react';

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

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

API

<ActionButton>
  <Icon /> or <Avatar />
  <Text />
  <NotificationBadge />
</ActionButton>

ActionButton

Name	Type	Default
`children`	`ReactNode`	Default: —
The content to display in the ActionButton.
`isPending`	`boolean`	Default: —
Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.
`isDisabled`	`boolean`	Default: —
Whether the button is disabled.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`size`	`'XS' \| 'S' \| 'M' \| 'L' \| 'XL'`	Default: `'M'`
The size of the ActionButton.
`staticColor`	`'black' \| 'white' \| 'auto'`	Default: —
The static color style to apply. Useful when the ActionButton appears over a color background.
`isQuiet`	`boolean`	Default: —
Whether the button should be displayed with a quiet style.