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="cta">Save</Button>

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

<Button variant="cta">
  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 '@react-spectrum/text';

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

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

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

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

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

Props#

Visual options#

Call to action#

View guidelines

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

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

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

Primary#

View guidelines

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

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

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

Quiet primary#

View guidelines

<Button variant="primary" isQuiet>Save</Button>

<Button variant="primary" isQuiet>Save</Button>

<Button
  variant="primary"
  isQuiet
>
  Save
</Button>

Secondary#

View guidelines

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

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

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

Quiet secondary#

View guidelines

<Button variant="secondary" isQuiet>Save</Button>

<Button variant="secondary" isQuiet>Save</Button>

<Button
  variant="secondary"
  isQuiet
>
  Save
</Button>

Over background#

View guidelines

<View backgroundColor="positive" padding="size-300">
  <Button variant="overBackground">Save</Button>
</View>

<View backgroundColor="positive" padding="size-300">
  <Button variant="overBackground">Save</Button>
</View>

<View
  backgroundColor="positive"
  padding="size-300"
>
  <Button variant="overBackground">
    Save
  </Button>
</View>

Quiet over background#

View guidelines

<View backgroundColor="positive" padding="size-300">
  <Button variant="overBackground" isQuiet>Save</Button>
</View>

<View backgroundColor="positive" padding="size-300">
  <Button variant="overBackground" isQuiet>Save</Button>
</View>

<View
  backgroundColor="positive"
  padding="size-300"
>
  <Button
    variant="overBackground"
    isQuiet
  >
    Save
  </Button>
</View>

Negative#

View guidelines

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

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

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

Quiet negative#

View guidelines

<Button variant="negative" isQuiet>Save</Button>

<Button variant="negative" isQuiet>Save</Button>

<Button
  variant="negative"
  isQuiet
>
  Save
</Button>

Disabled#

View guidelines

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

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

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