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">Test</Button>

Content#

Buttons can have a label, and icon, or both. An icon is provided by passing an icon component to the icon prop. A visible label can be provided by passing children.

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

<Button variant="primary">Label only</Button>
<Button variant="primary">
  <Bell />
  <Text>Icon + Label</Text>
</Button>
<Button variant="primary" aria-label="Icon only">
  <Bell />
</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>
  );
}

Props#

Visual options#

Call to action#

View guidelines

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

Primary#

View guidelines

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

Secondary#

View guidelines

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

Over background#

View guidelines

<div style={{backgroundColor: 'rgb(15, 121, 125)', padding: '15px 20px'}}>
  <Button variant="overBackground">Test</Button>
  <Button variant="overBackground" isQuiet>Test</Button>
</div>

Negative#

View guidelines

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