Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

🚧 πŸ‘·β€β™‚οΈUnder Construction πŸ‘·β€β™€οΈπŸš§

type Props = FrameProps & {
	chips: Array<string | ChipItem>
	type: string
	clearable: boolean
	onTapChip: (item: ChipItem) => void
	onValueChange: (items: ChipItem[]) => void
}

A ChipList is a horizontal list of Chips.

PropTypeNotes
chipsstring[] or object[]See Chips below.
typestringThe type to use for all chips (unless provided).
clearablebooleanWhether each chip should be clearable (unless provided).
onTapChipfunctionA callback to call when the user taps a chip.
onClearChipfunctionA callback to call when the user clears a chip.

Chips

The chips prop accepts an array of either strings or objects. If provided strings, each string will be used as the text prop of a Chip instance. If provided objects, each object will be used as the props for a Chip instance.

Examples

Overrides

// App.tsx

import { Override } from 'framer'

// Overrides

export function ChipListExampleA(): Override {
	return {
		chips: ['London', 'Transportation', 'News'],
	}
}

export function ChipListExampleB(): Override {
	return {
		chips: [
			{
				text: 'London',
				type: 'primary',
			},
			{
				text: 'Transportation',
				type: 'primary',
			},
			{
				text: 'News',
				type: 'secondary',
			},
		],
	}
}