Assist chip

An assist chip offers a small action or link tied to what a user is doing, such as starting a timer beside a recipe step. An outlined or elevated variant gives it more or less weight. Below, one chip loses its badge and gets it back, and another goes soft-disabled and recovers.

Start timer

Save

Add to list

Convert units

Cook mode

Scale recipe

Read aloud

Swap

Notes

Find a store

Set reminder

Rate

Cast

Scan

Help

Send

Undo

Edit

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 much a chip stands out, from most to least:

Elevated: chips that need separation from the surface behind them, such as actions over a photo or a patterned background.
Outlined: chips that sit beside content without competing with it, such as a row of related actions under a recipe title.

Chips and sets⁠

An assist chip is one action, and an assist chip set is the group of related actions it sits in. Each does a job the other cannot:

The chip carries one action: its label, its icon, and what happens when it is pressed. It stands alone beside the content it acts on, such as Add to calendar beside an event.
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 action to get past them. A screen reader hears them as unrelated buttons. Put any group of assist chips 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 button, or a link when you set href, so Enter and Space work with no extra markup.
A badge from badge-value or badge-dot, which badge-concealed hides and shows again without losing its setting.
A tooltip from tooltip-value, which a screen reader reads as the chip's description.
A touch target that stays large enough for a finger, whatever size the chip paints.
A leading icon from icon-name or the icon slot, which flip-icon-in-rtl mirrors on a right-to-left page.
A soft-disabled state, soft-disabled, that keeps the chip focusable while blocking its action.

Using assist chips well⁠

Offer an assist chip for a related, optional action, and keep the screen's primary action in a button.
Write a short label of one to three words, such as "Add to calendar", never a sentence.
Show a chip only while its action applies to what the user is doing.
Put related chips in an assist chip set, one set for each group, and give each set an aria-label that names the group.
Pick the chip by job: a suggestion chip for a generated reply or query, a filter chip for a filter, an input chip for something the user entered.

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

Variants⁠

variant picks the chip's treatment: outlined draws a thin outline, and elevated adds a shadow. Omit the attribute and the chip takes the variant from your style configuration, which is outlined unless you have changed it. Choosing a variant says when to use each.

Size⁠

size takes small or extra-small. Omit it and the chip takes the size from your style configuration, which is small unless you have changed it.

touch-target sets the area that takes a touch. The style configuration's overflow extends the touch area past the painted chip without changing the layout. wrapper makes the chip occupy the full touch area, and none reduces the area to the painted chip. The last two chips in the demo use wrapper and none, so the spacing around them differs.

Icons⁠

icon-name takes a Material Symbols name. An icon slot child does the same job for a custom icon, and wins over icon-name; the chip logs a warning when both are set.

Set flip-icon-in-rtl to turn a directional icon-name icon around for right-to-left reading. The demo puts the chip in a right-to-left container, so the switch shows the difference.

Badges⁠

badge-value shows text on the chip, such as a count. badge-dot shows a small dot instead, whether or not badge-value is set. 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 focus. tooltip-position places it relative to the chip, and has no effect without tooltip-value. Omit it and the tooltip takes the position from your style configuration, which is end-center unless you have changed it.

A screen reader announces the tooltip as the chip's description, after its name. Accessibility says more.

Links⁠

href turns the chip into a link, and target says where it opens. A link chip set to disabled or soft-disabled looks disabled and cannot be followed.

The preview sandbox refuses links that leave the demo, so the first chip points at a fragment of the demo. The second pairs _blank with a real address; the preview refuses it, so it does nothing here, and it opens a new tab on your page.

Disabled and soft-disabled⁠

disabled takes the chip out of the keyboard's reach: in a set, the arrow keys skip it. soft-disabled keeps it focusable and blocks the action, which suits a chip that must stay discoverable. Switch each on in the demo, then press the chip.

In a set⁠

Every demo on this tab puts its chips in a cw-assist-chip-set, because related actions come in groups. 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.

Disable Decline and the arrow keys skip it; a soft-disabled chip is not skipped, and in a right-to-left layout the arrow keys swap direction.

Assist chip set

Assist chip

Slots⁠

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

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

Children⁠

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

Render fragments⁠

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

Content projection⁠

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

Slots⁠

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

Snippets⁠

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

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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.

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

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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 Links, 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.
`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 Links, 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.

target has an effect only while href is set, and rel sets the link's relationship, with none by default.

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-assist-chip-elevated-container-color, which defaults to --ct-sys-color-surface.

Variant⁠

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

Other tokens⁠

These stay the same whatever the variant.

Names and states⁠

An assist 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.

The label text in the default slot names the chip. Keep the visible label as the name, and add aria-label only to a chip with no sensible text.
aria-label is the only ARIA attribute that takes effect. Any other aria-* attribute on the chip has no effect.
The leading icon is hidden from screen readers, whether it comes from the icon slot or icon-name. A slotted image's alt text does not name the chip.
A soft-disabled chip is announced as dimmed or unavailable.
A chip never submits a form, even inside one.
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.
A control that switches between two states suits a filter chip better.
An assist 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, always when a page holds more than one toolbar.

Keyboard and focus⁠

Key	Action
Tab	Moves focus to the chip, or past it
Enter	Activates the button or follows the link
Space	Activates the button

These are the native element's own behavior: Enter and Space on a button, and Enter on a link. The chip adds no key handling of its own.

A focus ring shows on keyboard focus.
Tabbing skips a disabled chip.
soft-disabled keeps the chip in the Tab order and blocks activation.
In an assist chip set, the set is one Tab stop, entered on the focused chip or else the first enabled one. Left and Right Arrow move between chips, skipping a disabled chip but not a soft-disabled one and wrapping at the ends, and Home and End move to the first and last chip, leaving focus where it was when that chip is disabled. Up and Down Arrow are not handled, so a set that wraps onto several rows is still one row to the keyboard. Outside a set, each chip is its own Tab stop.
A chip with hidden is left out of the set's keyboard travel: the arrow keys, Home, and End pass over it, and it is never the Tab stop.
A tabindex on a chip in a set has no effect, because the set decides which chip Tab reaches. The set draws no focus ring of its own.

Pointer and touch⁠

The default touch target, overflow, is at least 48 by 48 pixels, against the 24 by 24 pixels that WCAG 2.5.8 asks for. The painted chip is 32 pixels tall at its default size.
none reduces the target to the painted chip. At extra-small the painted chip is 24 pixels tall, which meets the minimum. The size examples show the settings.

Display settings⁠

Forced colors: a disabled chip's label and leading icon take GrayText.
Reduced motion: under a reduced-motion preference, the focus ring's animation stops.
Right-to-left: only the icon-name icon mirrors, when flip-icon-in-rtl is set. In a set, Left Arrow moves forward and Right Arrow moves back.

Standards⁠

With its defaults, the assist 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 the chip a name, from its label or an aria-label when it has none, and give each set an aria-label that names its group.
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.
1.1.1 Non-text Content (A): the leading icon is hidden from screen readers, so never rely on it alone to carry the chip's meaning.

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

Assist chip

Reference docs⁠link

Choosing a chip⁠link

Choosing a variant⁠link

Chips and sets⁠link

Built in⁠link

Using assist chips well⁠link

Variants⁠link

Size⁠link

Icons⁠link

Badges⁠link

Tooltips⁠link

Links⁠link

Disabled and soft-disabled⁠link

In a set⁠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 assist chips well⁠

Variants⁠

Size⁠

Icons⁠

Badges⁠

Tooltips⁠

Links⁠

Disabled and soft-disabled⁠

In a set⁠

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⁠