Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

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

type Props = Partial<FrameProps> & {
    text: string
    type: string
    clearable: boolean
    onResize: (width: number, height: number) => void
    onClear: () => void
  }>;

A Chip is a auto-sizing text often used in ChipLists.

PropTypeNotes
textstringThe Chip's text.
typestringSee Type below.
clearablebooleanWhether to display an button to clear the chip.
onClearfunctionA callback to call when the user taps the clear button.
onResizefunctionA callback to call when the Chip resizes.

Examples

Override

// App.tsx

import { Override } from 'framer'

// Overrides

export function ChipExample(): Override {
	return {
		text: 'News',
		type: 'primary',
		clearable: false,
	}
}