gog-chip

Chip

A compact, clickable label with five sizes, two shapes, and optional avatar, icon, and remove affordances.

Overview

Import the component and drop it into a template.

import { ChipComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [ChipComponent],
})

Basic usage — a clickable chip with projected content:

Design

<gog-chip (gogClick)="onClick('Design')">Design</gog-chip>

No chip clicked yet.

Examples

Sizes

Five size steps, from xsm to slg.

xsm

slg

@for (sizeOption of sizes; track sizeOption) {
  <gog-chip [size]="sizeOption">{{ sizeOption }}</gog-chip>
}

Shapes

Square-ish rounded corners, or a fully rounded pill.

Rounded

Pill

<gog-chip shape="rounded">Rounded</gog-chip>
<gog-chip shape="pill">Pill</gog-chip>

Removable

removable adds a trailing (×) button that emits gogRemove and stops the click from also reaching gogClick.

Angular

TypeScript

RxJS

@for (tag of tags(); track tag.id) {
  <gog-chip [removable]="true" (gogRemove)="removeTag(tag.id)">{{ tag.label }}</gog-chip>
}

Non-interactive

clickable="false" drops the role="button", tab stop, and pointer cursor — for a chip that's a static label, not a control.

Read only

<gog-chip [clickable]="false">Read only</gog-chip>

Disabled

Blocks click and keyboard activation, and hides the remove button even if removable is set.

Disabled

<gog-chip [disabled]="true">Disabled</gog-chip>

Leading icon

Shown when avatarUrl is not set.

Info

Success

Warning

<gog-chip iconName="info">Info</gog-chip>

Leading avatar

Renders independently of iconName — if both are set, the avatar and icon both render.

Jane Doe

<gog-chip avatarUrl="https://i.pravatar.cc/64" avatarAlt="Jane Doe">Jane Doe</gog-chip>

Full width

Stretches to fill its container; wrapped here in a narrower box to show it.

Full width

<gog-chip [fullWidth]="true">Full width</gog-chip>

API Reference

Inputs

Name	Type	Default	Description
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Font size, padding, gap, and avatar/icon size.
`shape`	`'rounded' \| 'pill'`	`'rounded'`	Corner radius style.
`disabled`	`boolean`	`false`	Blocks click/keyboard activation and hides the remove button, regardless of removable.
`clickable`	`boolean`	`true`	Whether the chip responds to click/Enter/Space and exposes role="button". Set false for a static, non-interactive label.
`removable`	`boolean`	`false`	Shows a trailing remove (×) button that emits gogRemove.
`fullWidth`	`boolean`	`false`	Stretches the chip to fill its container.
`ariaLabel`	`string`	`''`	Accessible name for the chip surface.
`removeAriaLabel`	`string`	`'Remove chip'`	Accessible name for the remove button.
`avatarUrl`	`string \| null`	`null`	Leading avatar image URL.
`avatarAlt`	`string`	`''`	Alt text for the avatar image.
`iconName`	`GogIconName \| null`	`null`	Leading icon. Renders independently of avatarUrl — if both are set, the avatar and icon both render.

Outputs

Name	Type	Description
`gogClick`	`EventEmitter<MouseEvent \| KeyboardEvent>`	Emitted on click, Enter, or Space, when clickable and not disabled.
`gogRemove`	`EventEmitter<void>`	Emitted when the remove button is pressed. Stops the click from also reaching gogClick.

Styling Tokens

Every CSS custom property the chip paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-chip-bg / -hover-bg`	Background, default and hover.
`--gog-chip-border / -border-width / -style`	Border.
`--gog-chip-color / -font-weight`	Text color and weight.
`--gog-chip-radius / -pill-radius`	Corner radius, square and pill shape.
`--gog-chip-remove-color / -remove-hover-color`	Remove (×) icon color.
`--gog-chip-{size}-font-size / -padding-block / -padding-inline / -gap / -avatar-size / -icon-size`	Full sizing scale, per size step (xsm/sm/md/lg/slg).