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

ChipDismissibleGroupRoot

PropTypeDefaultRequired
direction
"row" | "row-reverse" | "column"

-

-

gap
1 | 2 | 3 | 1 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; } | 2 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; } | 3 & { "@sm"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; "@md"?: number | boolean | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "false" | undefined; ... 5 more ...; "@initial"?: number | ... 12 more ... | undefined; } & { ...; }

-

wrap
"wrap" | "no-wrap" | "wrap-reverse"

-

-

justify
boolean

-

-

align
boolean

-

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-

disabled
boolean

-

-

onDismiss(value: ReactText) => void

-

ChipDismissibleGroup.Item

PropTypeDefaultRequired
asChild
boolean

-

-

value
string | number

-

onDismiss
(value: ReactText) => void

-

-

disabled
boolean

-

-

size
"sm" | "md" | "lg"
md

-

asWorkaround
"symbol" | "object" | "p" | "body" | "clipPath" | "filter" | "mask" | "marker" | "div" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | ComponentClass<any, any> | FunctionComponent<any>

-

-

cssCSSProperties

-

-

dismissActionLabelstringDismiss

-