Chips

Chips are compact elements that allow users to enter information, make selections, filter content, or trigger actions.

Chip Examples

Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar.

Chips with the onClick property defined change appearance on focus, hover, and click.
Chips with the onDelete property defined will display a delete icon which changes appearance on hover.

class MyChips extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    alert("You clicked the delete icon.");
  }

  handleClick() {
    alert("You clicked the Chip.");
  }

  render() {
    return (
      <Grid container justify="center">
        <Chip label="Basic Chip" margin={2} />
        <Chip
          avatar={<Avatar>NG</Avatar>}
          label="Clickable Chip"
          onClick={this.handleClick}
          margin={2}
        />   
        <Chip
          icon={<Face />}
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          margin={2}
        />
        <Chip
          label="Custom delete icon Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          margin={2}
          deleteIcon={<Done />}
        />
        <Chip
          label="Clickable Link Chip"
          margin={2}
          component="a"
          href="#chip"
          clickable
        />
        <Chip
          avatar={<Avatar>MB</Avatar>}
          label="Primary Clickable Chip"
          clickable
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          icon={<Face />}
          label="Primary Clickable Chip"
          clickable
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          label="Deletable Primary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="primary"
        />
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="secondary"
        />
        <Chip
          icon={<Face />}
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="secondary"
        />
      </Grid>
    );
  }
}

class MyChips extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    alert("You clicked the delete icon.");
  }

  handleClick() {
    alert("You clicked the Chip.");
  }

  render() {
    return (
      <Grid container justify="center">
        <Chip label="Basic Chip" margin={2} />
        <Chip
          avatar={<Avatar>NG</Avatar>}
          label="Clickable Chip"
          onClick={this.handleClick}
          margin={2}
        />   
        <Chip
          icon={<Face />}
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          margin={2}
        />
        <Chip
          label="Custom delete icon Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          margin={2}
          deleteIcon={<Done />}
        />
        <Chip
          label="Clickable Link Chip"
          margin={2}
          component="a"
          href="#chip"
          clickable
        />
        <Chip
          avatar={<Avatar>MB</Avatar>}
          label="Primary Clickable Chip"
          clickable
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          icon={<Face />}
          label="Primary Clickable Chip"
          clickable
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          label="Deletable Primary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="primary"
        />
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="secondary"
        />
        <Chip
          icon={<Face />}
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          margin={2}
          color="secondary"
        />
      </Grid>
    );
  }
}

Outlined Chips

class MyChips extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    alert("You clicked the delete icon.");
  }

  handleClick() {
    alert("You clicked the Chip.");
  }

  render() {
    return (
      <Grid container justify="center">
        <Chip label="Basic Chip" variant="outlined" margin={2} />
        <Chip
          avatar={<Avatar>NG</Avatar>}
          label="Clickable Chip"
          onClick={this.handleClick}
          variant="outlined"
          margin={2}
        />       
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
        />
        <Chip
          icon={<Face />}
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
        />
        <Chip
          label="Custom delete icon Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          deleteIcon={<Done />}
        />
        <Chip
          label="Clickable Link Chip"
          variant="outlined"
          margin={2}
          component="a"
          href="#chip"
          clickable
        />
        <Chip
          avatar={<Avatar>MB</Avatar>}
          label="Primary Clickable Chip"
          clickable
          variant="outlined"
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          icon={<Face />}
          label="Primary Clickable Chip"
          clickable
          variant="outlined"
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          label="Deletable Primary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="primary"
        />
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="secondary"
        />
        <Chip
          icon={<Face />}
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="secondary"
        />
      </Grid>
    );
  }
}

class MyChips extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleDelete() {
    alert("You clicked the delete icon.");
  }

  handleClick() {
    alert("You clicked the Chip.");
  }

  render() {
    return (
      <Grid container justify="center">
        <Chip label="Basic Chip" variant="outlined" margin={2} />
        <Chip
          avatar={<Avatar>NG</Avatar>}
          label="Clickable Chip"
          onClick={this.handleClick}
          variant="outlined"
          margin={2}
        />       
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
        />
        <Chip
          icon={<Face />}
          label="Clickable Deletable Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
        />
        <Chip
          label="Custom delete icon Chip"
          onClick={this.handleClick}
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          deleteIcon={<Done />}
        />
        <Chip
          label="Clickable Link Chip"
          variant="outlined"
          margin={2}
          component="a"
          href="#chip"
          clickable
        />
        <Chip
          avatar={<Avatar>MB</Avatar>}
          label="Primary Clickable Chip"
          clickable
          variant="outlined"
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          icon={<Face />}
          label="Primary Clickable Chip"
          clickable
          variant="outlined"
          margin={2}
          color="primary"
          onDelete={this.handleDelete}
          deleteIcon={<Done />}
        />
        <Chip
          label="Deletable Primary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="primary"
        />
        <Chip
          avatar={
            <Avatar>
              <Face />
            </Avatar>
          }
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="secondary"
        />
        <Chip
          icon={<Face />}
          label="Deletable Secondary Chip"
          onDelete={this.handleDelete}
          variant="outlined"
          margin={2}
          color="secondary"
        />
      </Grid>
    );
  }
}

Chips

Chip Examples

Outlined Chips

Properties

<Chip />