Chip for compact references to people, records, or files. Use Tag for colored categories and Status for workflow states.
Record label
startElement and endElement for avatars, icons, or other content. endElementDivider adds a separator before the trailing content. The default chip is a div; its slots can contain an action when the chip itself is not interactive.
Open a record
onClick renders a button with keyboard activation. clickable controls hover and pointer styling only; setting it alone does not create a button or add an action. disabled prevents activation of the button. Do not nest buttons or links inside an interactive chip.
Use render to replace the root element. If an onClick chip renders a non-button element, set nativeButton={false}. When isLabelHidden hides the label, give an interactive chip an aria-label.
Width and empty labels
maxWidth constrains the chip in pixels. String labels truncate and show their full text in a tooltip on hover. tooltipLabel changes the tooltip text; alwaysShowTooltip also enables it when the label fits. Keep essential information available without relying on hover.
Missing, empty-string, or false children show emptyLabel, which defaults to Untitled. forceEmptyText suppresses that placeholder. isLabelHidden hides both the content label and the placeholder while preserving the slots.
Appearance
size accepts sm or md. variant accepts ghost, soft, or solid; ghost is the default. Use shape="round" for a pill, weight="medium" for emphasis, and color="secondary" for secondary text.
Props
Types and defaults are generated from the public component types. Native attributes and event handlers are also accepted.boolean
default:"false"
Shows the string-label tooltip even when the label is not truncated.
boolean
default:"isDefined(onClick)"
Enables hover and pointer styling. Defaults to whether
onClick is supplied; does not add button semantics by itself."primary" | "secondary"
default:"primary"
Primary or secondary text color.
boolean
default:"false"
Applies disabled styling and disables activation when
onClick is supplied.string
default:"Untitled"
Placeholder shown when children are missing, empty, or false, unless
forceEmptyText is enabled.ReactNode
Content after the label. Avoid interactive content when the chip itself is a button.
boolean
default:"false"
Adds a divider before
endElement when that slot has content.boolean
default:"false"
Suppresses the empty label when children are missing, empty, or false.
Hides the label while keeping the start and end elements. Supply an accessible name for an interactive chip.
number
Maximum chip width in pixels, used to constrain and truncate the label.
boolean
default:"true"
Set to
false when a clickable chip uses render with an element other than a native button.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render."square" | "round"
default:"square"
Square or round corners.
"sm" | "md"
default:"sm"
Visual size of the chip.
ReactNode
Content before the label, such as an avatar or icon.
string
Tooltip content for a string label. Defaults to the label text.
"top" | "left" | "right" | "bottom"
Position of the string-label tooltip.
"solid" | "soft" | "ghost"
default:"ghost"
Background treatment of the chip.
"regular" | "medium"
default:"regular"
Font weight of the label.