Chip Dismissible Group

Related components

Combines the DismissibleGroup logic together with the Chip primitive styling

Used to visualise groups of dismissible information, in fields such as an entity or different attributes. Can also be used to represent removable filtering criteria.

<ChipDismissibleGroup
onDismiss={(value) => {
  alert(`dismiss ${value}`)
}}
>
<ChipDismissibleGroup.Item value="a" dismissActionLabel="Dismiss 'A'">
  <Icon is={Person} />
  Dismissible
</ChipDismissibleGroup.Item>
<ChipDismissibleGroup.Item value="b" dismissActionLabel="Dismiss 'B'">
  <Icon is={Person} />
  Dismissible
</ChipDismissibleGroup.Item>
<ChipDismissibleGroup.Item
  value="c"
  dismissActionLabel="Dismiss 'C'"
  disabled
>
  <Icon is={Person} />
  Dismissible
</ChipDismissibleGroup.Item>
</ChipDismissibleGroup>

API Reference

ChipDismissibleGroup.Item

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`asChild`	`boolean`	-	-
`disabled`	`boolean`	-	-
`dismissActionLabel`	`string`	`Dismiss`	-
`dismissed`	`boolean`	-	-
`onDismiss`	`() => void`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	`md`	-
`value`	`string` \| `number`	-