Buttons

Buttons allow users to perform an action.

Best Practices

Use buttons to trigger actions or to submit forms.
Only one primary button should appear on each page.
In general, when placing buttons on the page, a primary button should appear before secondary or disabled buttons.

Accessibility

Label buttons with what they do. Add a clear message of what happens after the click.
Ensure sure the label text makes sense out of context. Be explicit.

Color Application

Buttons will use the primary theme color by default. Set your color property to apply the secondary or neutral colors.

Contained Buttons

Contained buttons are used for primary actions and are distinguished by their use of elevation and fill.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button>Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button color="secondary">Secondary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button color="neutral">Neutral Color</Button>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button>Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button color="secondary">Secondary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button color="neutral">Neutral Color</Button>
  </Grid>
</Grid>

Outlined Buttons

Outlined buttons can act as a lower-emphasis alternative to contained buttons or a higher-emphasis alternative to text buttons.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button variant="outlined">Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" color="secondary">
      Secondary Color
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" color="neutral">
      Neutral Color
    </Button>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button variant="outlined">Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" color="secondary">
      Secondary Color
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" color="neutral">
      Neutral Color
    </Button>
  </Grid>
</Grid>

Text Buttons

Text buttons are typically used for less-pronounced actions, including those located:

In dialogs
In cards

In cards, text buttons help maintain an emphasis on card content.

Note: If intended as an anchor, use the Link component.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button variant="text">Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" color="secondary">
      Secondary Color
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" color="neutral">
      Neutral Color
    </Button>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button variant="text">Primary Color</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" color="secondary">
      Secondary Color
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" color="neutral">
      Neutral Color
    </Button>
  </Grid>
</Grid>

Disabled Buttons

Use disabled buttons with caution. According to WCAG guidelines, disabled buttons are not required to meet the contrast requirements. Regardless, they are difficult to read and many users may miss them. Instead, use enabled buttons with appropriate validation notifications.

When using on a form submission awaiting a data or validation response, update the button’s label with appropriate feedback, such as “Loading.” Or better yet, swap the button with a loading indicator with accompanying text for a screen-reader to announce. Demo coming soon.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button disabled>Contained Disabled</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" disabled>
      Outlined Disabled
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" disabled>
      Text Disabled
    </Button>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button disabled>Contained Disabled</Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" disabled>
      Outlined Disabled
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" disabled>
      Text Disabled
    </Button>
  </Grid>
</Grid>

Floating Action Buttons

A floating action button (FAB) performs the primary, or most common, action on a screen. In fact, the FAB should ideally represent the primary function of your entire app. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular and extended.

Only use a FAB if it is the most suitable way to present the primary action.
Only one floating action button is recommended per screen to represent the most common action.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Fab color="primary" aria-label="Add">
      <Add />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab color="secondary" aria-label="Edit">
      <Edit />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab variant="extended">
      <Navigation />
      Extended
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab disabled aria-label="Delete">
      <Delete />
    </Fab>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Fab color="primary" aria-label="Add">
      <Add />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab color="secondary" aria-label="Edit">
      <Edit />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab variant="extended">
      <Navigation />
      Extended
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab disabled aria-label="Delete">
      <Delete />
    </Fab>
  </Grid>
</Grid>

The floating action button animates onto the screen as an expanding piece of material, by default.

A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes.

The Zoom transition can be used to achieve this. Note that since both the exiting and entering animations are triggered at the same time, we use enterDelay to allow the outgoing Floating Action Button's animation to finish before the new one enters.

class FloatingActionButtonZoom extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    const fabs = [
      {
        color: 'primary',
        icon: <Add />,
        label: 'New',
      },
      {
        color: 'secondary',
        icon: <Edit />,
        label: 'Edit',
      },
      {
        color: 'inherit',
        icon: <Delete />,
        label: 'Trash',
      },
    ];

    return (
      <div style={{ position: 'relative' }}>
        <AppBar position="static" color="neutral">
          <Tabs value={this.state.value} onChange={this.handleChange} variant="fullWidth">
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {fabs.map((fab, index) => (
          <Zoom
            key={fab.color}
            in={this.state.value === index}
            style={{
              transitionDelay: `${this.state.value === index ? 300 : 0}ms`,
            }}
            unmountOnExit
          >
            <Fab
              aria-label={fab.label}
              color={fab.color}
              style={{ position: 'absolute', right: '0' }}
            >
              {fab.icon}
            </Fab>
          </Zoom>
        ))}
      </div>
    );
  }
}

class FloatingActionButtonZoom extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 0,
    };
  }

  handleChange(event, value) {
    this.setState({ value });
  }

  render() {
    const fabs = [
      {
        color: 'primary',
        icon: <Add />,
        label: 'New',
      },
      {
        color: 'secondary',
        icon: <Edit />,
        label: 'Edit',
      },
      {
        color: 'inherit',
        icon: <Delete />,
        label: 'Trash',
      },
    ];

    return (
      <div style={{ position: 'relative' }}>
        <AppBar position="static" color="neutral">
          <Tabs value={this.state.value} onChange={this.handleChange} variant="fullWidth">
            <Tab label="Item One" />
            <Tab label="Item Two" />
            <Tab label="Item Three" />
          </Tabs>
        </AppBar>
        {this.state.value === 0 && (
          <Typography component="div" padding={3}>
            Item One
          </Typography>
        )}
        {this.state.value === 1 && (
          <Typography component="div" padding={3}>
            Item Two
          </Typography>
        )}
        {this.state.value === 2 && (
          <Typography component="div" padding={3}>
            Item Three
          </Typography>
        )}
        {fabs.map((fab, index) => (
          <Zoom
            key={fab.color}
            in={this.state.value === index}
            style={{
              transitionDelay: `${this.state.value === index ? 300 : 0}ms`,
            }}
            unmountOnExit
          >
            <Fab
              aria-label={fab.label}
              color={fab.color}
              style={{ position: 'absolute', right: '0' }}
            >
              {fab.icon}
            </Fab>
          </Zoom>
        ))}
      </div>
    );
  }
}

Sizes

For larger or smaller buttons, use the size property.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button variant="outlined" size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button variant="outlined" size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button variant="text" size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button variant="text" size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Fab size="small" color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
    <Fab size="medium" color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
    <Fab color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab variant="extended" size="small" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
    <Fab variant="extended" size="medium" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
    <Fab variant="extended" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete fontSize="small" />
    </IconButton>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete />
    </IconButton>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete fontSize="large" />
    </IconButton>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="outlined" size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button variant="outlined" size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button variant="outlined" size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button variant="text" size="small" margin={{ right: 2 }}>
      Small
    </Button>
    <Button variant="text" size="medium" margin={{ right: 2 }}>
      Medium
    </Button>
    <Button variant="text" size="large" margin={{ right: 2 }}>
      Large
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Fab size="small" color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
    <Fab size="medium" color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
    <Fab color="secondary" aria-label="Add" margin={{ right: 2 }}>
      <Add />
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <Fab variant="extended" size="small" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
    <Fab variant="extended" size="medium" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
    <Fab variant="extended" margin={{ right: 2 }}>
      <Navigation />
      Extended
    </Fab>
  </Grid>
  <Grid item xs={12}>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete fontSize="small" />
    </IconButton>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete />
    </IconButton>
    <IconButton aria-label="Delete" margin={{ right: 2 }}>
      <Delete fontSize="large" />
    </IconButton>
  </Grid>
</Grid>

Buttons with Icons

Icons should be placed before the text for consistency.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button color="secondary">
      <Delete />
      Delete
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button>
      <Navigation />
      Directions
    </Button>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <Button color="secondary">
      <Delete />
      Delete
    </Button>
  </Grid>
  <Grid item xs={12}>
    <Button>
      <Navigation />
      Directions
    </Button>
  </Grid>
</Grid>

Icon Buttons

Icon buttons are commonly found in app bars and toolbars.

Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a favorite to an item.

<Grid container spacing={2}>
  <Grid item xs={12}>
    <IconButton aria-label="Delete">
      <Delete />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton aria-label="Delete" disabled color="primary">
      <Delete />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton color="secondary" aria-label="Favorite this item">
      <Favorite />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton color="primary" aria-label="Edit message">
      <Edit />
    </IconButton>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={12}>
    <IconButton aria-label="Delete">
      <Delete />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton aria-label="Delete" disabled color="primary">
      <Delete />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton color="secondary" aria-label="Favorite this item">
      <Favorite />
    </IconButton>
  </Grid>
  <Grid item xs={12}>
    <IconButton color="primary" aria-label="Edit message">
      <Edit />
    </IconButton>
  </Grid>
</Grid>

Button Group

Also referred to as "segmented buttons", a ButtonGroup contains related actions.

An active button may be preselected, as demo'd, or the value may be left to change upon user interaction.

<ButtonGroup>
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

<ButtonGroup>
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

Fullwidth

<ButtonGroup fullWidth>
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

<ButtonGroup fullWidth>
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

Small

<ButtonGroup size="small">
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

<ButtonGroup size="small">
  <Button>Button A</Button>
  <Button active={true}>Button B</Button>
  <Button>Button C</Button>
</ButtonGroup>

Third-Party Routing

One common use case is to use the button to trigger a navigation to a new page. The ButtonBase component provides a property to handle this use case: component. Given that a lot of the interactive components rely on ButtonBase, you should be able to take advantage of it everywhere:

import { Link } from 'react-router-dom';

<Button component={Link} to="/open-collective">
  Link
</Button>;

import { Link } from 'react-router-dom';

<Button component={Link} to="/open-collective">
  Link
</Button>;