Back to Component Browser

Chip

Quartz

lib/quartz/components/Chip/index.ts

Preview

DefaultTealPurpleSmall

Import

import { Chip } from '@/lib/quartz';

Props (10)

Name	Type	Required	Default	Description
id	string	optional	—	The id of the text element
label	string	required	—	The text to display inside the Chip
backgroundColor	enum	required	—	The background color to apply to the Chip. While "white" and "lightGray" are similar, they look different against colored backgrounds...
startSlot	ReactNode	optional	—	A slot to center align another piece of content before the Chip contents. Typically an SVG icon rendered as a react component.
endSlot	ReactNode	optional	—	A slot to center align another piece of content after the Chip contents. Typically an SVG icon rendered as a react component.
size	enum	optional	small	The size of the Chip.
slotSize	enum	optional	small	The size of the slot. Defaults to the size of the Chip.
startSlotGap	enum	optional	small	The size of the gap between the start slot and the border of the Chip.
as	enum	optional	span	Tag name for the Chip.
onClick	() => void	optional	—	Optional click handler for when Chip is a button.

Usage

Not used in any projects yet.