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>

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

PropTypeDefaultRequired
asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-

ChipGroup

PropTypeDefaultRequired
gap
1 | 2 | 3 | 1 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; } | 2 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; } | 3 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; }
2

-

direction
"row" | "row-reverse" | "column"

-

-

wrap
"wrap" | "no-wrap" | "wrap-reverse"

-

-

justify
boolean

-

-

align
boolean

-

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-