Suggestion chip

A suggestion chip offers a reply, a question, or a next step that acts the moment someone clicks it. Its variant sets how far it stands out from the page. Below, a recipe chat offers its follow-ups; watch the badge come and go and one chip go quiet.

Thank you

Fresh ideas

Under 30 minutes

Sounds good

What wine?

Double the batch

Show substitutes

Not today

Tell me more

Print the card

Plan the week

Yes, please

No nuts

Something spicier

Use up leftovers

More garlic

Cook for six

Why that?

Swap in tofu

Shopping list

Start over

Keep it simple

How long?

Next recipe

Surprise me

Reference docs⁠

Blazor

React

Web

Overview

Examples

API

Styling

Accessibility

Choosing a chip⁠

Four chips share one shape. Each suits a different job:

Assist chip: a smart, related action offered in context, such as Add to calendar beside an event.
Suggestion chip: a generated reply or query the reader can take, such as a suggested answer in a chat.
Filter chip: a tag that turns a filter on or off, such as Vegetarian or Under 30 minutes.
Input chip: one piece of information the reader entered, removable, such as a recipient in an address line.

Two jobs belong elsewhere. An action on the page's own content is a button, and a choice in a form is a checkbox, radio button, or select. Each chip has a set of its own that lays a group of them out.

Choosing a variant⁠

Two variants set how far a suggestion chip stands out from the content around it:

Elevated: a chip that lifts off the surface on a shadow, such as quick replies over a photo or a tinted card.
Outlined: a chip that sits flat inside a hairline border, such as follow-up questions under a chat message on a plain surface.

Chips and sets⁠

A suggestion chip is one suggestion, and a suggestion chip set is the group of suggestions it sits in. Each does a job the other cannot:

The chip carries one suggestion: its label, its icon, and what happens when the reader takes it. It stands alone where there is one thing to suggest, such as a single follow-up question under an answer.
The set makes several chips one control. It lays them out in rows that wrap, takes one Tab stop for the whole group with the arrow keys moving between chips, and tells a screen reader the chips form one toolbar under the name in its aria-label.

Loose chips each take a Tab stop of their own, so a keyboard user presses Tab once per suggestion to get past them. A screen reader hears them as unrelated buttons. Suggestions nearly always come several at a time, so put them in a set.

A set lays out its own kind of chip only. Any other child stays where it is but is left out of the arrow-key movement, and the set logs a warning naming it.

Built in⁠

A badge, set with badge-value or badge-dot and hidden and restored with badge-concealed, so a count needs no separate element.
A tooltip from tooltip-value, which a screen reader reads as the chip's description.
A leading icon from icon-name or the icon slot, mirrored on right-to-left pages by flip-icon-in-rtl.
A link, when href is set, so a suggestion can take the reader to a page instead of running code.
A touch target of at least 48 by 48 pixels by default, even when the chip paints smaller.
A soft-disabled state that stays focusable, for a suggestion that is unavailable but worth explaining.

Using suggestion chips well⁠

Show chips where they apply, and remove them when the moment passes; suggestions are dynamic and tied to context.
Write each label as the reply or query itself, in a few words, never a sentence.
Put the chips in a suggestion chip set beside or under the content they respond to, and give the set an aria-label.
Keep the primary action in a button; chips stay secondary.
Use an assist chip for an action tied to the task, and a filter chip for a setting that switches on and off.

These rules follow Material 3 Expressive's guidance for chips, on material.io.

Variants⁠

variant sets how far a chip stands out: outlined sits flat inside a border, and elevated lifts on a shadow. Omit it and the chip takes the variant from your style configuration, which is outlined unless you have changed it. The Overview says when to use each.

Size⁠

size picks the chip's height. Omit it and the chip takes the size from your style configuration, which is small unless you have changed it; extra-small is the more compact choice.

touch-target sets the area that takes a touch, at least 48 by 48 pixels. With overflow, the style configuration's default unless you have changed it, the area extends past the chip and takes no layout space. With wrapper, the chip occupies the whole area in the layout. With none, the area shrinks to the chip itself.

Icons⁠

icon-name takes a Material Symbols name. The icon slot takes any similarly sized content, such as a cw-icon or an SVG, and wins over icon-name when both are set.

flip-icon-in-rtl mirrors the icon-name icon on a right-to-left page, which suits a directional icon such as a reply arrow. The switch below sets it on a chip inside a right-to-left container.

Badges⁠

badge-value shows text in a badge; while it is empty and badge-dot is not set, no badge renders. badge-dot shows a small dot with no text and takes precedence over badge-value. badge-concealed hides the badge and keeps its settings, so clearing it shows the same badge again.

Tooltips⁠

tooltip-value adds a tooltip that opens on hover and on keyboard focus. tooltip-position places it relative to the chip and has no effect without a value. Omit it and the tooltip takes its position from your style configuration, which is end-center unless you have changed it.

Links⁠

Set href and the chip becomes a link that goes to that address when clicked. target chooses where it opens, with _self for the same tab and _blank for a new one. rel sets the link's relationship, and the link has none by default.

The preview in this demo cannot leave the demo, so the link points at a paragraph below the chip.

Disabled and soft-disabled⁠

disabled takes the chip out of the Tab order and stops it acting. soft-disabled keeps the chip focusable, marks it unavailable, and blocks activation, which suits a suggestion that needs an explanation.

In a set⁠

Every demo on this tab puts its chips in a cw-suggestion-chip-set, because suggestions come several at a time. Switch the set off below and press Tab: it visits every chip in turn. Switch it back on, and Tab reaches the group once while the arrow keys take over. Chips and sets says why both are needed.

In a chat⁠

Place the set under the message its chips answer. A click is the native click event, and a suggestion chip holds no state of its own, so your handler updates the conversation.

Suggestion chip set

Suggestion chip

Slots⁠

Slot	Description
(default)	The `cw-suggestion-chip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Children⁠

Child	Description
`children`	The `CrSuggestionChip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Render fragments⁠

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The `CbSuggestionChip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Content projection⁠

Content	Description
content with no `slot`	The `CaSuggestionChip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Slots⁠

Slot	Description
`default`	The `CvSuggestionChip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Snippets⁠

Snippet	Description
`children`	The `CsSuggestionChip` elements, in the order they appear.

Only cw-suggestion-chip children take part in keyboard travel. Any other child stays where it is, outside the travel, and the set logs a warning naming it.

Properties⁠

Property	Attribute	Type	Description
`badgeConcealed`	`badge-concealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`badge-dot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`badge-value`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`download`	`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`flip-icon-in-rtl`	`boolean`default `false`	Flips the icon supplied by the `icon-name` property in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`icon-name`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set. See Links.
`size`	`sizesmall`, `extra-small`	`ChipSizeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`soft-disabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`target_blank`, `_self`, `_parent`, `_top`, `""`	`UrlTargetUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`tooltip-positionstart-start`, `start-center`, `start-end`, `center-start`, `center-end`, `end-start`, `end-center`, `end-end`	`TooltipPositionTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`tooltip-value`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`touch-targetnone`, `overflow`, `wrapper`	`TouchTargetTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`variantelevated`, `outlined`	`ChipVariantChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Slots⁠

Slot	Description
(default)	The chip's label content.
`icon`	The icon to display in the chip, intended for a `cw-icon` or similarly sized visual content such as an SVG.

Events⁠

Event	Type	Detail	Description
`click`	`MouseEvent`	—	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`link-activate`	`LinkActivateEvent`	`LinkActivateEventDetail`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `slot="icon"` child. If both are provided, the `slot="icon"` child will take precedence, and a warning will be logged. See Icons.
`onNavigate`	`(detail: LinkActivateEventDetail, event: LinkActivateEvent) => void`	Called when the link points inside the app: the same origin, opening in the same tab. The browser's navigation is canceled first, so this handler navigates, and it replaces the navigation `ChameleonRouterProvider` would make.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set. See Links.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`ChipVariantTypeChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Children⁠

Child	Description
`children`	The chip's label content.
a child with `slot="icon"`	The icon to display in the chip, intended for a `CrIcon` or similarly sized visual content such as an SVG.

Events⁠

Prop	Argument	Description
`onClick`	`React.MouseEvent<HTMLElement>`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Parameters⁠

Parameter	Type	Description
`BadgeConcealed`	`bool?`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`BadgeDot`	`bool?`default `false`	Shows the badge as a small dot with no text, whether or not `BadgeValue` is set. See Badges.
`BadgeValue`	`string?`	The badge's text. While it is empty and `BadgeDot` is not set, no badge renders. Ignored if `BadgeDot` is set. See Badges.
`Disabled`	`bool?`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`Download`	`string?`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `Href` is set.
`FlipIconInRtl`	`bool?`default `false`	Flips the icon supplied by the `IconName` parameter in RTL mode. A slotted icon is not flipped. See Icons.
`Href`	`string?`	The URL to navigate to when the chip is clicked. A chip with `Href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`IconName`	`string?`	A Material Symbols icon name. This is an alternative to using the `Icon` render fragment. If both are provided, the `Icon` render fragment will take precedence, and a warning will be logged. See Icons.
`OnNavigate`	`EventCallback<LinkActivateEventArgs>`	Navigates for a link that points inside the app: the same base address, opening in the same tab. The browser's navigation is canceled first, and this callback replaces the NavigationManager.NavigateTo the component calls by default. It is not called for any other link.
`Rel`	`string?`	The link's relationship to the linked URL, as the anchor's `Rel`, used exactly as given. Unset, the anchor has no `Rel`. Ignored unless `Href` is set. See Links.
`Size`	`ChipSize?ChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`SoftDisabled`	`bool?`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`Target`	`UrlTarget?UrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `Href`. Empty, it opens in the same tab. Ignored unless `Href` is set. See Links.
`TooltipPosition`	`TooltipPosition?TooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `TooltipValue`. See Tooltips.
`TooltipValue`	`string?`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`TouchTarget`	`TouchTarget?TouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`Variant`	`ChipVariant?ChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Render fragments⁠

Once you write Icon or any other fragment as a child element, the main content must go in an explicit <ChildContent> too; markup beside <Icon> is a compile error. Here ChildContent is: The chip's label content.

<CbSuggestionChip>
    <Icon><CbIcon>favorite</CbIcon></Icon>
    <ChildContent>Main content</ChildContent>
</CbSuggestionChip>

content_copy

Parameter	Type	Description
`ChildContent`	`RenderFragment?`	The chip's label content.
`Icon`	`RenderFragment?`	The icon to display in the chip, intended for a `CbIcon` or similarly sized visual content such as an SVG.

Event callbacks⁠

Parameter	Type	Description
`OnClick`	`EventCallback<MouseEventArgs>`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`OnLinkActivate`	`EventCallback<LinkActivateEventArgs>`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `Href`, `Target`, `Download`, `Rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Inputs⁠

Input	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` input in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set. See Links.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`ChipVariantTypeChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Content projection⁠

Content	Description
content with no `slot`	The chip's label content.
an element with `slot="icon"`	The icon to display in the chip, intended for a `CaIcon` or similarly sized visual content such as an SVG.

Outputs⁠

Output	Event	Description
`cwClick`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`cwLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `icon` slot. If both are provided, the `icon` slot will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set. See Links.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`ChipVariantTypeChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Slots⁠

Slot	Description
`default`	The chip's label content.
`icon`	The icon to display in the chip, intended for a `CvIcon` or similarly sized visual content such as an SVG.

Events⁠

Event	Type	Description
`click`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`linkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Props⁠

Prop	Type	Description
`badgeConcealed`	`boolean`default `false`	Hides the badge while keeping its value and dot setting, so clearing this property shows the same badge again. See Badges.
`badgeDot`	`boolean`default `false`	Shows the badge as a small dot with no text, whether or not `badgeValue` is set. See Badges.
`badgeValue`	`string`	The badge's text. While it is empty and `badgeDot` is not set, no badge renders. Ignored if `badgeDot` is set. See Badges.
`disabled`	`boolean`default `false`	Whether or not the chip is disabled.A disabled chip leaves the Tab order and ignores clicks. A disabled link chip has no followable link. See Disabled and soft-disabled.
`download`	`string`	Downloads the linked URL instead of navigating to it. A file name saves it under that name, and an empty string downloads it under the server's own name, like the bare HTML attribute. Unset, it navigates. Ignored unless `href` is set.
`flipIconInRtl`	`boolean`default `false`	Flips the icon supplied by the `iconName` prop in RTL mode. A slotted icon is not flipped. See Icons.
`href`	`string`	The URL to navigate to when the chip is clicked. A chip with `href` is a link: a screen reader announces it as one. A disabled or soft-disabled link chip cannot be followed. See Links.
`iconName`	`string`	A Material Symbols icon name. This is an alternative to using the `iconSnippet` snippet. If both are provided, the `iconSnippet` snippet will take precedence, and a warning will be logged. See Icons.
`rel`	`string`	The link's relationship to the linked URL, as the anchor's `rel`, used exactly as given. Unset, the anchor has no `rel`. Ignored unless `href` is set. See Links.
`size`	`ChipSizeTypeChipSize.Small`, `.ExtraSmall`default `ChipSize.Small`, from the style configuration	Sets how tall the chip is. See Size.
`softDisabled`	`boolean`default `false`	Whether or not the chip is "soft-disabled" (disabled but still focusable).A soft-disabled chip looks disabled and ignores clicks, but stays focusable. Use this when a chip needs increased visibility when disabled. For when this is needed, see WAI-ARIA Authoring Practices: disabled controls. See Disabled and soft-disabled.
`target`	`UrlTargetTypeUrlTarget.Blank`, `.Self`, `.Parent`, `.Top`, `.Empty`default `UrlTarget.Empty`	Where the link opens `href`. Empty, it opens in the same tab. Ignored unless `href` is set. See Links.
`tooltipPosition`	`TooltipPositionTypeTooltipPosition.StartStart`, `.StartCenter`, `.StartEnd`, `.CenterStart`, `.CenterEnd`, `.EndStart`, `.EndCenter`, `.EndEnd`default `TooltipPosition.EndCenter`, from the style configuration	Where the tooltip appears around the element, such as above or beside it. It has no effect without `tooltipValue`. See Tooltips.
`tooltipValue`	`string`	The tooltip's text. The tooltip opens on hover and on focus, and a screen reader announces it as the control's description unless it only repeats the control's name. No tooltip renders while it is empty. See Tooltips.
`touchTarget`	`TouchTargetTypeTouchTarget.None`, `.Overflow`, `.Wrapper`default `TouchTarget.Overflow`, from the style configuration	The area that takes a touch, at least 48 by 48 pixels and centered on the component. `overflow` extends it past the component without changing the component's layout size, `wrapper` makes the component take up the whole area in the layout, and `none` limits it to the component's own size. See Size.
`variant`	`ChipVariantTypeChipVariant.Elevated`, `.Outlined`default `ChipVariant.Outlined`, from the style configuration	Sets whether the chip is raised with a shadow or flat with an outline. See Variants.

A click never submits a form, even inside one.

Snippets⁠

Snippet	Description
`children`	The chip's label content.
`iconSnippet`	The icon to display in the chip, intended for a `CsIcon` or similarly sized visual content such as an SVG.

Events⁠

Prop	Type	Description
`onClick`	`MouseEvent`	Dispatched when the chip is clicked. It bubbles, is composed, and is cancelable.
`onLinkActivate`	`LinkActivateEvent`	Fired when the link is followed in the same tab, before the browser navigates. Cancel it to navigate with a router instead. It bubbles, is composed, and is cancelable. Its `detail` carries `href`, `target`, `download`, `rel`, `altKey`, `ctrlKey`, `metaKey`, `shiftKey`, and `originalEvent`.

A soft-disabled chip withholds its click from listeners on the chip and its ancestors, except a capture-phase listener on an ancestor.

Each attribute value has its own tokens; a cell shows its token's value, and selecting the cell shows the token's fallback path, with each name and value ready to copy. For example, the elevated column's container-color row is --ct-suggestion-chip-elevated-container-color, which defaults to --ct-sys-color-surface.

Variant⁠

Name	`elevated`
`container-color`	`--ct-sys-color-surface` `--ct-suggestion-chip-elevated-container-color`
`container-elevation`	`--ct-sys-elevation-level1` `--ct-suggestion-chip-elevated-container-elevation`
`hover-container-elevation`	`--ct-sys-elevation-level2` `--ct-suggestion-chip-elevated-hover-container-elevation`
`focus-container-elevation`	`--ct-sys-elevation-level1` `--ct-suggestion-chip-elevated-focus-container-elevation`
`pressed-container-elevation`	`--ct-sys-elevation-level1` `--ct-suggestion-chip-elevated-pressed-container-elevation`
`disabled-container-color`	`--ct-sys-color-on-surface` `--ct-suggestion-chip-elevated-disabled-container-color`
`disabled-container-elevation`	`--ct-sys-elevation-level0` `--ct-suggestion-chip-elevated-disabled-container-elevation`
`disabled-container-opacity`	`0.12` `--ct-suggestion-chip-elevated-disabled-container-opacity`

Other tokens⁠

These stay the same whatever the variant.

Names and states⁠

A suggestion chip is a button, or a link when href is set, and follows the WAI-ARIA Authoring Practices: Button pattern, or the WAI-ARIA Authoring Practices: Link pattern with href.

The accessible name is the label text in the default slot. Keep that visible label as the name.
Of the aria-* attributes on the chip, only aria-label takes effect; any other has no effect.
The leading icon is hidden from assistive technology, so neither an icon slot nor an icon-name icon joins the name, and a slotted image's alt is never read.
A disabled chip is announced as unavailable and cannot be activated. A soft-disabled chip is announced as dimmed and stays focusable. A disabled or soft-disabled link chip looks disabled and cannot be followed.
The tooltip text is the focused control's description: a screen reader announces it after the name, unless it only repeats the name, which is skipped.
For a setting that switches on and off, use a filter chip, which is a toggle button with aria-pressed.
A suggestion chip set is announced as a toolbar and follows the WAI-ARIA Authoring Practices: Toolbar pattern. It has no name of its own, so give each set an aria-label, such as "Suggested replies".

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the chip; a suggestion chip set is one Tab stop for the whole set
Enter	Activates the chip, or follows the link
Space	Activates the chip (a link chip takes Enter only)
Left Arrow, Right Arrow	Inside a set, move focus to the previous or next chip, skipping any chip that is disabled or `hidden`, and wrapping at the ends
Home, End	Inside a set, move focus to the first or last chip; focus stays where it was when that chip is disabled

Enter and Space are the native element's own behavior; the chip adds no key handling of its own.

A focus ring shows on keyboard focus only.
A chip outside a set is reached by Tab and has no arrow-key navigation. Up and Down Arrow are not handled, so a set that wraps onto several rows is still one row to the keyboard.
disabled removes the chip from the Tab order. soft-disabled keeps it in the Tab order, and a set does not skip it. A tabindex on a chip in a set has no effect.
Calling focus() on the chip moves focus to it, and does nothing while disabled is set.

Pointer and touch⁠

The default touch target is at least 48 by 48 pixels, which is Material's size and well above the 24 by 24 pixels WCAG 2.5.8 asks for. touch-target can shrink it to the chip's own size, so keep the default unless the layout needs wrapper; the Size examples show each setting.

Display settings⁠

In forced colors mode, a disabled chip's label and leading icon take GrayText, and a link chip's outline takes ActiveText.
Under a reduced-motion preference, the focus ring's animation stops.
flip-icon-in-rtl mirrors an icon-name icon on a right-to-left page; a slotted icon is not mirrored. In a set, the arrow keys swap direction.

Standards⁠

With its defaults, the suggestion chip meets seven WCAG 2.2 success criteria:

2.1.1 Keyboard (A)
2.1.2 No Keyboard Trap (A)
2.5.2 Pointer Cancellation (A)
2.4.7 Focus Visible (AA)
2.5.8 Target Size (Minimum) (AA)
1.3.1 Info and Relationships (A)
1.4.13 Content on Hover or Focus (AA)

Four more depend on how you use it:

4.1.2 Name, Role, Value (A): give every chip label text, or an aria-label when it has none, and give each set an aria-label.
2.5.3 Label in Name (A): keep the visible label's words in any aria-label.
2.4.6 Headings and Labels (AA): write a label that says what the chip does, such as "Under 30 minutes".
1.1.1 Non-text Content (A): put anything that carries meaning in the label text, because the leading icon is hidden from assistive technology.

Token	Value
`--ct-suggestion-chip-container-elevation`	`--ct-sys-elevation-level0` `--ct-suggestion-chip-container-elevation`
`--ct-suggestion-chip-container-height`	`32px` `--ct-suggestion-chip-container-height`
`--ct-suggestion-chip-disabled-label-text-color`	`--ct-sys-color-on-surface` `--ct-suggestion-chip-disabled-label-text-color`
`--ct-suggestion-chip-disabled-label-text-opacity`	`0.38` `--ct-suggestion-chip-disabled-label-text-opacity`
`--ct-suggestion-chip-disabled-leading-icon-color`	`--ct-sys-color-on-surface` `--ct-suggestion-chip-disabled-leading-icon-color`
`--ct-suggestion-chip-disabled-leading-icon-opacity`	`0.38` `--ct-suggestion-chip-disabled-leading-icon-opacity`
`--ct-suggestion-chip-disabled-outline-color`	`--ct-sys-color-on-surface` `--ct-suggestion-chip-disabled-outline-color`
`--ct-suggestion-chip-disabled-outline-opacity`	`0.12` `--ct-suggestion-chip-disabled-outline-opacity`
`--ct-suggestion-chip-focus-container-elevation`	`--ct-sys-elevation-level0` `--ct-suggestion-chip-focus-container-elevation`
`--ct-suggestion-chip-focus-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-focus-label-text-color`
`--ct-suggestion-chip-focus-leading-icon-color`	`--ct-sys-color-primary` `--ct-suggestion-chip-focus-leading-icon-color`
`--ct-suggestion-chip-hover-container-elevation`	`--ct-sys-elevation-level0` `--ct-suggestion-chip-hover-container-elevation`
`--ct-suggestion-chip-hover-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-hover-label-text-color`
`--ct-suggestion-chip-hover-leading-icon-color`	`--ct-sys-color-primary` `--ct-suggestion-chip-hover-leading-icon-color`
`--ct-suggestion-chip-hover-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-hover-state-layer-color`
`--ct-suggestion-chip-hover-state-layer-opacity`	`--ct-sys-state-hover-state-layer-opacity` `--ct-suggestion-chip-hover-state-layer-opacity`
`--ct-suggestion-chip-icon-label-space`	`8px` `--ct-suggestion-chip-icon-label-space`
`--ct-suggestion-chip-icon-size`	`18px` `--ct-suggestion-chip-icon-size`
`--ct-suggestion-chip-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-label-text-color`
`--ct-suggestion-chip-label-text-font`	`--ct-sys-typescale-label-large-font` `--ct-suggestion-chip-label-text-font`
`--ct-suggestion-chip-label-text-line-height`	`--ct-sys-typescale-label-large-line-height` `--ct-suggestion-chip-label-text-line-height`
`--ct-suggestion-chip-label-text-size`	`--ct-sys-typescale-label-large-size` `--ct-suggestion-chip-label-text-size`
`--ct-suggestion-chip-label-text-weight`	`--ct-sys-typescale-label-large-weight` `--ct-suggestion-chip-label-text-weight`
`--ct-suggestion-chip-leading-icon-color`	`--ct-sys-color-primary` `--ct-suggestion-chip-leading-icon-color`
`--ct-suggestion-chip-leading-space`	`16px` `--ct-suggestion-chip-leading-space`
`--ct-suggestion-chip-outline-color`	`--ct-sys-color-outline` `--ct-suggestion-chip-outline-color`
`--ct-suggestion-chip-outline-width`	`1px` `--ct-suggestion-chip-outline-width`
`--ct-suggestion-chip-pressed-container-elevation`	`--ct-sys-elevation-level0` `--ct-suggestion-chip-pressed-container-elevation`
`--ct-suggestion-chip-pressed-label-text-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-pressed-label-text-color`
`--ct-suggestion-chip-pressed-leading-icon-color`	`--ct-sys-color-primary` `--ct-suggestion-chip-pressed-leading-icon-color`
`--ct-suggestion-chip-pressed-state-layer-color`	`--ct-sys-color-on-surface-variant` `--ct-suggestion-chip-pressed-state-layer-color`
`--ct-suggestion-chip-pressed-state-layer-opacity`	`--ct-sys-state-pressed-state-layer-opacity` `--ct-suggestion-chip-pressed-state-layer-opacity`
`--ct-suggestion-chip-trailing-space`	`16px` `--ct-suggestion-chip-trailing-space`
`--ct-suggestion-chip-with-leading-icon-leading-space`	`8px` `--ct-suggestion-chip-with-leading-icon-leading-space`
`--ct-suggestion-chip-with-trailing-icon-trailing-space`	`8px` `--ct-suggestion-chip-with-trailing-icon-trailing-space`

Suggestion chip

Reference docs⁠link

Choosing a chip⁠link

Choosing a variant⁠link

Chips and sets⁠link

Built in⁠link

Using suggestion chips well⁠link

Variants⁠link

Size⁠link

Icons⁠link

Badges⁠link

Tooltips⁠link

Links⁠link

Disabled and soft-disabled⁠link

In a set⁠link

In a chat⁠link

Slots⁠link

Children⁠link

Render fragments⁠link

Content projection⁠link

Slots⁠link

Snippets⁠link

Properties⁠link

Slots⁠link

Events⁠link

Props⁠link

Children⁠link

Events⁠link

Parameters⁠link

Render fragments⁠link

Event callbacks⁠link

Inputs⁠link

Content projection⁠link

Outputs⁠link

Props⁠link

Slots⁠link

Events⁠link

Props⁠link

Snippets⁠link

Events⁠link

Variant⁠link

Other tokens⁠link

Names and states⁠link

Keyboard and focus⁠link

Pointer and touch⁠link

Display settings⁠link

Standards⁠link

Reference docs⁠

Choosing a chip⁠

Choosing a variant⁠

Chips and sets⁠

Built in⁠

Using suggestion chips well⁠

Variants⁠

Size⁠

Icons⁠

Badges⁠

Tooltips⁠

Links⁠

Disabled and soft-disabled⁠

In a set⁠

In a chat⁠

Slots⁠

Children⁠

Render fragments⁠

Content projection⁠

Slots⁠

Snippets⁠

Properties⁠

Slots⁠

Events⁠

Props⁠

Children⁠

Events⁠

Parameters⁠

Render fragments⁠

Event callbacks⁠

Inputs⁠

Content projection⁠

Outputs⁠

Props⁠

Slots⁠

Events⁠

Props⁠

Snippets⁠

Events⁠

Variant⁠

Other tokens⁠

Names and states⁠

Keyboard and focus⁠

Pointer and touch⁠

Display settings⁠

Standards⁠