Chip

import { Chip } from '@sparrowengg/twigs-react';

Result

<Chip> Sparrow </Chip>

Result

<Chip closable onClose={() => alert("Chip closed")}>
  Sparrow
</Chip>

Result

<Chip color="primary" size="lg" selectable>
  Sparrow
</Chip>

Result

<Chip
  color="primary"
  size="lg"
  leftElement={<TickCircleFillIcon />}
  rightElement={<ChevronDownIcon />}
>
  Sparrow
</Chip>

Property	Description	Type	Default
variant	style of the chip	`outline` `solid`	solid
color		`default` `primary` `success` `error` `warning`	default
size		`xs` `sm` `md` `lg`	sm
rounded	border radius of the chip	`sm` `full`	sm
closable	add a close icon after the chip content	boolean	false
onClose	Callback function for closable icon	function
leftElement	React element to display on the left side of the chip	ReactNode	null
rightElement	React element to display on the left side of the chip	ReactNode	null
selectable	Whether the chip is selectable	boolean	false
active	Whether the chip is active, if its selectable	boolean	false
defaultActive	Default active state of the chip, if its selectable	boolean	false
onActiveStateChange	Callback function for active state change	function