Chips represent small pieces of information such as tags, categories, or filter values. They support colors, icons, removable state, and active state.
Use color to control the chip's color. Supported colors are primary, success, danger, warning, and accent.
Use size to control the chip size. Options are sm, md (default), and lg.
Use icon to add an icon from our Icon Pack.
Set [removable]="true" to show a close button. Listen for (removed) to handle removal.
Set [active]="true" to highlight the chip with a filled style. Useful for filter selection states.
Set [disabled]="true" to prevent interaction and reduce opacity.
Run the following command to add this component to your project:
npx base-ui-cli add chips
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add chips
// Paths are relative to aliases.components (default: src/app/components)
import { ChipComponent } from './chips/chip.component';
@Component({
selector: 'app-your-component',
imports: [
ChipComponent
],
template: `...`
})
export class YourComponent {} API for chips — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-chip | class | string | '' | Additional host CSS classes (merged via cn()). |
base-chip | color | ChipColor | '' | — |
base-chip | size | ChipSize | 'md' | — |
base-chip | removable | boolean | false | — |
base-chip | disabled | boolean | false | — |
base-chip | icon | string | undefined | undefined | — |
base-chip | active | boolean | false | — |
base-chip | removeLabel | unknown | 'Remove' | — |
base-chip | (removed) | void | — | Emits when removed occurs. |
base-chip | (clicked) | void | — | Emits when clicked occurs. |
Content