Chip

Chip is a toggle button with aria-pressed that works in both controlled and uncontrolled modes. Click or press Space/Enter to toggle selection.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { Chip } from '@infinitibit_gmbh/ui';

export function Example() {
  return <Chip label="Design" defaultSelected />;
}

Sizes

Three sizes are available: sm, md (default), and lg.

Multi-select group

Compose multiple chips for filter/tag selection. Use controlled mode (selected + onChange) to manage shared state.

API

Prop	Type	Default	Description
label	string	—	Visible text (required)
size	'sm' | 'md' | 'lg'	'md'	Size variant
selected	boolean	—	Controlled selection state
defaultSelected	boolean	false	Initial selection state (uncontrolled)
onChange	(selected: boolean) => void	—	Called with the new selection state on toggle
disabled	boolean	—	Prevents interaction

All other <button> props are forwarded.

Accessibility

• Renders as <button type="button"> — keyboard-accessible by default.
• aria-pressed is set to "true" when selected, "false" when not.
• Space and Enter toggle selection via native button behaviour.
• Disabled chips receive the disabled attribute.