Level: molecule.
Purpose and use
Toggle a compact choice, such as a category or view option. Use Filter Chip for an applied filter with a removable value, and a link for navigation.
Anatomy, behavior, and accessibility
- A native toggle button contains a label, optional leading icon and optional count badge. Sizes L/M/S share the same selection behavior.
- Activation emits the inverse of the supplied
selectedvalue. The parent must write the next value back; Chip does not keep an independent selected state. aria-pressedreflects the visible selection. Disabled blocks the native button and output, and suppresses the selected presentation even ifselected=true.- The badge is decorative and hidden from assistive technology. If its count is essential, include that meaning in surrounding text. Keep labels short and specific; there is no close/removal affordance in this component.
Local component contract
This is the active owned contract for component.chip. The API below
is verified against the current local implementation, focused test and story.
The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains
migration provenance, not the runtime owner.
Classes and selectors
WblChipComponent—wbl-chip(src/app/design-system/patterns/chip/chip.component.ts).
Inputs
WblChipComponent.size = input<WblChipSize>('L')WblChipComponent.label = input('Chip')WblChipComponent.selected = input(false)WblChipComponent.disabled = input(false)WblChipComponent.icon = input(false)WblChipComponent.iconName = input<WblIconName>('spark')WblChipComponent.badge = input(false)WblChipComponent.badgeLabel = input<string | number>('1')
Public types and allowed values
type WblChipSize = 'L' | 'M' | 'S';
Icon-name inputs use WblIconName from the shared icon contract;
choose a key present in the owned icon pack, not an arbitrary external icon name.
Models
- None.
Outputs
WblChipComponent.selectedChange = output<boolean>()
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
- Code:
src/app/design-system/patterns/chip/chip.component.ts. - Focused test:
src/app/design-system/patterns/chip/chip.component.spec.ts. - Public export:
export * from './patterns/chip/chip.component';insrc/app/design-system/index.ts. - Storybook:
storybook/stories/chip.stories.ts(Design System/Patterns/wbl-chip).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.