Chips

Usage

Definition

Chips are small elements which present small amounts of information or offer optional actions.

Common Characteristics

All chips have a background color, and are 24px high. They have 8px left and right padding unless this is increased to achieve a 40px minimum width.

Chips labels may be bold ALL-CAPS, or regular sentence case. Maintain a minimum of 4px space between chips vertically and horizontally.

Basic Chips

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Chips may be dark, medium, or light.

Transparent Chips

Light ChipMedium ChipDark Chip

Light ChipMedium ChipDark Chip

Chips can be marked as transparent. Background colors will become transparent while additional stylings remain unchanges. This is useful for working with dark backgrounds.

Chips with Tooltips

CH

CH

Chips can have an optional tooltip that displays on hover/tap.

HMRCHGAMPPACH-SACH-BAC1

Color can be used to indicate higher urgency.

Actionable Chips

SDDEWSCRCR 5CR 5.0CR 5.0

Chips can be used to navigate to more content.

Filter Chips

OVEPassengerHondaAccord Sedan10,000 - 30,000 miAL - America's Auto Auction Birmingham

With icon variant

OVE

Chips can optionally be prepended AND/OR appended with any of the Prism icons.

Selection Chip

Selected

Selected option 1Selected option 2Unselected

Chips can be used to select options from a group. Note the sentence case labels.

Design

Basic Chips

Actionable Chips

Filter Chips

Selection Chips

Code

Basic Chips

Live Editor

<div> <div className="row"> <div className="col"> <Chip color="light" label="Light" /> <Chip color="medium" label="Medium" /> <Chip color="dark" label="Dark" /> </div> </div> <div className="row"> <div className="col"> <Chip color="light" iconBefore="arrow-left" bold uppercase> Light Chip </Chip> <Chip color="medium" iconBefore="arrow-left" bold uppercase> Medium Chip </Chip> <Chip color="dark" iconBefore="arrow-left" bold uppercase> Dark Chip </Chip> </div> </div> <div className="row"> <div className="col"> <Chip color="light" iconAfter="cup" bold uppercase> Light Chip </Chip> <Chip color="medium" iconAfter="cup" bold uppercase> Medium Chip </Chip> <Chip color="dark" iconAfter="cup" bold uppercase> Dark Chip </Chip> </div> </div> <div className="row"> <div className="col"> <Chip color="light">Light Chip</Chip> <Chip color="medium">Medium Chip</Chip> <Chip color="dark">Dark Chip</Chip> </div> </div> <div className="row"> <div className="col"> <Chip color="light" iconBefore="arrow-right"> Light Chip </Chip> <Chip color="medium" iconBefore="arrow-right"> Medium Chip </Chip> <Chip color="dark" iconBefore="arrow-right"> Dark Chip </Chip> </div> </div> <div className="row"> <div className="col"> <Chip color="light" iconAfter="cancel-circle"> Light Chip </Chip> <Chip color="medium" iconAfter="cancel-circle"> Medium Chip </Chip> <Chip color="dark" iconAfter="cancel-circle"> Dark Chip </Chip> </div> </div> </div>

<div>
  <div className="row">
    <div className="col">
      <Chip color="light" label="Light" />
      <Chip color="medium" label="Medium" />
      <Chip color="dark" label="Dark" />
    </div>
  </div>

  <div className="row">
    <div className="col">
      <Chip color="light" iconBefore="arrow-left" bold uppercase>
        Light Chip
      </Chip>
      <Chip color="medium" iconBefore="arrow-left" bold uppercase>
        Medium Chip
      </Chip>
      <Chip color="dark" iconBefore="arrow-left" bold uppercase>
        Dark Chip
      </Chip>
    </div>
  </div>

  <div className="row">
    <div className="col">
      <Chip color="light" iconAfter="cup" bold uppercase>
        Light Chip
      </Chip>
      <Chip color="medium" iconAfter="cup" bold uppercase>
        Medium Chip
      </Chip>
      <Chip color="dark" iconAfter="cup" bold uppercase>
        Dark Chip
      </Chip>
    </div>
  </div>

  <div className="row">
    <div className="col">
      <Chip color="light">Light Chip</Chip>
      <Chip color="medium">Medium Chip</Chip>
      <Chip color="dark">Dark Chip</Chip>
    </div>
  </div>

  <div className="row">
    <div className="col">
      <Chip color="light" iconBefore="arrow-right">
        Light Chip
      </Chip>
      <Chip color="medium" iconBefore="arrow-right">
        Medium Chip
      </Chip>
      <Chip color="dark" iconBefore="arrow-right">
        Dark Chip
      </Chip>
    </div>
  </div>

  <div className="row">
    <div className="col">
      <Chip color="light" iconAfter="cancel-circle">
        Light Chip
      </Chip>
      <Chip color="medium" iconAfter="cancel-circle">
        Medium Chip
      </Chip>
      <Chip color="dark" iconAfter="cancel-circle">
        Dark Chip
      </Chip>
    </div>
  </div>
</div>

Result

Loading...

Actionable Chips

Live Editor

<div className="row align-items-center"> <div className="col"> <Chip color="light" type="action" onClick={() => { alert("Actionable Chip was clicked."); }} bold uppercase > SD </Chip> <a href="https://ask.com"> <Chip color="light" type="action" bold uppercase> DE </Chip> </a> <a href="https://bing.com"> <Chip color="light" type="action" bold uppercase> WS </Chip> </a> <a href="https://search.yahoo.com"> <Chip color="light" type="action" bold uppercase > CR 5 </Chip> </a> <a href="https://qwant.com"> <Chip color="light" type="action" bold uppercase> CR 5.0 </Chip> </a> <a href="https://searchencrypt.com"> <Chip color="light" type="action" bold uppercase iconBefore="shield" > CR 5.0 </Chip> </a> </div> </div>

<div className="row align-items-center">
  <div className="col">
    <Chip
      color="light"
      type="action"
      onClick={() => {
        alert("Actionable Chip was clicked.");
      }}
      bold
      uppercase
    >
      SD
    </Chip>
    <a href="https://ask.com">
      <Chip color="light" type="action" bold uppercase>
        DE
      </Chip>
    </a>
    <a href="https://bing.com">
      <Chip color="light" type="action" bold uppercase>
        WS
      </Chip>
    </a>
    <a href="https://search.yahoo.com">
      <Chip
        color="light"
        type="action"
        bold
        uppercase
      >
        CR 5
      </Chip>
    </a>
    <a href="https://qwant.com">        
      <Chip color="light"
        type="action"
        bold
        uppercase>
        CR 5.0
      </Chip>
    </a>
    <a href="https://searchencrypt.com">
      <Chip
        color="light"
        type="action"
        bold
        uppercase
        iconBefore="shield"
      >
      CR 5.0
      </Chip>
    </a>
  </div>
</div>

Result

Loading...

Actionable chips are created by providing a type="action" prop. Providing a wrapper anchor tag with an href will allow the chip to take the user to the provided URL.

Chips with Tooltips

Live Editor

class ChipTooltipExample extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { tooltipOpen: false, }; } toggle() { const { tooltipOpen } = this.state; this.setState({ tooltipOpen: !tooltipOpen, }); } render() { const { tooltipOpen } = this.state; return ( <div> <Chip id="prism-docs__chip-tooltip-demo-code--small" color="light" bold> CH </Chip> <Tooltip size="sm" target="prism-docs__chip-tooltip-demo-code--small" toggle={this.toggle} isOpen={tooltipOpen} > Small Tooltip content </Tooltip> </div> ); } }

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

    this.toggle = this.toggle.bind(this);

    this.state = {
      tooltipOpen: false,
    };
  }

  toggle() {
    const { tooltipOpen } = this.state;

    this.setState({
      tooltipOpen: !tooltipOpen,
    });
  }

  render() {
    const { tooltipOpen } = this.state;

    return (
      <div>
        <Chip id="prism-docs__chip-tooltip-demo-code--small" color="light" bold>
          CH
        </Chip>
        <Tooltip
          size="sm"
          target="prism-docs__chip-tooltip-demo-code--small"
          toggle={this.toggle}
          isOpen={tooltipOpen}
        >
          Small Tooltip content
        </Tooltip>
      </div>
    );
  }
}

Result

Loading...

Chips Props

Name	Type	Default	Description
color	string	"medium"	Sets the chip color to either light, medium or dark
label	string	null	Displays label text displayed inside the chip
iconBefore	string	null	Displays an icon before the chip label text
iconAfter	string	null	Displays an icon after the chip label text
bold	boolean	false	Sets the chip label text to display as bold
uppercase	boolean	false	Sets the chip label text to display as uppercase