Skip to main content
Use Chip for compact references to people, records, or files. Use Tag for colored categories and Status for workflow states.

​
Usage

Children accept text or nodes. startElement and endElement accept avatars, icons, or other content. endElementDivider adds a separator before the trailing content. The default chip is a div; its slots can contain a separate action while the chip itself remains presentational. Chip never inserts a label. Supply a translated fallback from your application when needed. Omit children for content made entirely from slots. An interactive chip with only an icon needs a caller-supplied accessible name.

​
Appearance

size accepts sm or md. variant accepts ghost, soft, solid, or plain; ghost is the default. Plain chips have no resting fill or leading padding. Clickable plain chips retain the ghost hover and pressed backgrounds, pointer cursor, and focus ring. Use shape="round" for a pill, weight="medium" for emphasis, and color="secondary" for secondary text.
Supplying onClick keeps the default div. Use render to compose an explicit native button, anchor, router link, or another appropriate owner. Native attributes, handlers, styles and the root ref reach that owner. A native button supplies keyboard activation and disabled behavior. Chip recognizes native disabled state and aria-disabled for appearance; aria-disabled alone does not prevent activation. clickable controls hover and pointer appearance and defaults to whether onClick is supplied. Set it explicitly for a link without a click handler. Do not nest buttons or links inside a chip that is itself interactive.
URL text remains plain text. Intentional links belong in caller content or in the explicit root composition.

​
Truncation and tooltips

maxWidth constrains the rendered chip width in pixels, including padding. The same limit applies to plain chips with asymmetric padding. Content truncates with an ellipsis by default; truncate={false} leaves it unconstrained by truncation. String children supply their own tooltip text. Set tooltipContent for custom text or node content, tooltipDelay for the opening delay, and isTooltipMultiline to preserve line breaks. alwaysShowTooltip also enables the tooltip when content fits. These options follow OverflowingTextWithTooltip. Keep essential information available without relying on hover.

​
Migration

Replace emptyLabel with caller-provided fallback children, and replace forceEmptyText or isLabelHidden with omitted children. Keep translated product fallbacks in the application. Replace tooltipLabel with tooltipContent. Move disabled to the explicit interactive owner and remove nativeButton. Add a native button or link through render wherever the chip previously relied on onClick to choose its element. Replace leading-padding overrides with variant="plain". Keep clickable enabled for native links and buttons that need hover and pressed feedback.

​
Props

Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.
​
boolean
default:"false"
Shows the content tooltip even when the content is not truncated.
​
ReactNode
Caller-owned content. Missing or empty children add no fallback label.
​
boolean
default:"isDefined(onClick)"
Enables hover and pointer styling. Defaults to whether onClick is supplied; does not change the default div or add keyboard behavior.
​
"primary" | "secondary"
default:"primary"
Primary or secondary text color.
​
ReactNode
Content after the label. Avoid interactive content when the chip itself is a button or link.
​
boolean
default:"false"
Adds a divider before endElement when that slot has content.
​
boolean
Preserves line breaks in the tooltip text.
​
number
Maximum rendered chip width in pixels, including its leading and trailing padding.
​
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the default div. Compose a native button or link explicitly; that owner supplies disabled and native interaction behavior.
​
"round" | "square"
default:"square"
Square or round corners.
​
"md" | "sm"
default:"sm"
Visual size of the chip.
​
ReactNode
Content before the label, such as an avatar or icon.
​
string
Tooltip text. Defaults to string children. Supply text explicitly for node content.
​
number
Delay in milliseconds before the tooltip opens.
​
"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"
Position of the content tooltip.
​
boolean
default:"true"
Truncates overflowing content with an ellipsis. Defaults to true.
​
"ghost" | "plain" | "soft" | "solid"
default:"ghost"
Background treatment. Plain has no resting fill or leading padding, with ghost hover and pressed feedback when clickable.
​
"medium" | "regular"
default:"regular"
Font weight of the content.