Chip

Related components

Chip dismissible group and Chip toggle group

A component in the shape of a pill providing visual cues to prompt users to enter information or filter content. Chip itself is a primitive. It has no functional logic in itself, however, it is used to provide common styles for all the Chip-based components.

<Chip>
  <Chip.Content>Not the tasty kind</Chip.Content>
</Chip>

Gap

gap={ 1 | 2 | 3}

We provide three options for gap space between chips. 1 will be typically used within Input fields (multiselect) or when space is limited. 2 is the default option that provides a comfortable distance for the set.

<ChipGroup gap={1}>
  <Chip>
    <Chip.Content>A</Chip.Content>
  </Chip>
  <Chip>
    <Chip.Content>B</Chip.Content>
  </Chip>
  <Chip>
    <Chip.Content>C</Chip.Content>
  </Chip>
</ChipGroup>

Size

size="sm | md | lg"

<ChipGroup align="center">
  <Chip size="sm">
    <Chip.Content>
      <Icon is={Upload} />A
    </Chip.Content>
  </Chip>
  <Chip size="md">
    <Chip.Content>
      <Icon is={Upload} />B
    </Chip.Content>
  </Chip>
  <Chip size="lg">
    <Chip.Content>
      <Icon is={Upload} />C
    </Chip.Content>
  </Chip>
  <Chip
    size={{
      '@initial': 'lg',
      '@md': 'md',
      '@lg': 'sm'
    }}
  >
    <Chip.Content>
      <Icon is={Upload} />C
    </Chip.Content>
  </Chip>
</ChipGroup>

Appearance

appearance="standard | modern"

The standard appearance uses the primary brand colours. The modern appearance uses neutral grey tones for a more subdued look.

<ChipGroup align="center">
  <Chip appearance="standard">
    <Chip.Content>Standard</Chip.Content>
  </Chip>
  <Chip appearance="modern">
    <Chip.Content>Modern</Chip.Content>
  </Chip>
</ChipGroup>

Icon

When an <Icon /> is used as an immediate child of <Chip.Content /> we automatically transform it to a <Chip.Icon /> which applies the correct styles and sizing to it.

<ChipGroup>
  <Chip>
    <Chip.Content>
      <Icon is={Upload} /> Icon
    </Chip.Content>
  </Chip>
  <Chip>
    <Chip.Content>
      <Chip.Icon is={Upload} /> Chip.Icon
    </Chip.Content>
  </Chip>
</ChipGroup>

If additional nesting is needed; you can use the <Chip.Icon /> component directly.

<ChipGroup>
  <Chip>
    <Chip.Content>
      <div>
        <Icon is={Upload} /> Icon (wrong sizing)
      </div>
    </Chip.Content>
  </Chip>
  <Chip>
    <Chip.Content>
      <div>
        <Chip.Icon is={Upload} /> Chip.Icon
      </div>
    </Chip.Content>
  </Chip>
</ChipGroup>

Disabled

<Chip data-disabled>
  <Chip.Content>Not the tasty kind</Chip.Content>
</Chip>

API Reference

Chip

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-

ChipGroup

Prop	Type	Default	Required
`as`	`JSX.IntrinsicElements`	-	-