GUILD OF GLEKS UIv21.14.0

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.

typescript 
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
sm
md
lg
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>
}

Filter chips — selected21.9.0

[(selected)] makes a chip a toggle rather than a press: it flips itself on click, Enter and Space, draws an inset ring while it is on, and announces aria-pressed either way. Two-way, so a row of filters needs no click handler. The ring is --gog-chip-selected-shadow, its thickness --gog-chip-selected-ring-width — a ring rather than a fill because :hover and :active already own the background, and the selected look has to survive both.

It is tri-state, and null is the default — not false. A chip that is not part of a selection model should say nothing at all, so null writes no aria-pressed and draws no ring: every chip on this page above and below behaves exactly as it did before this input existed. false is different — it is a toggle that is currently off, and it says so, because a chip with no aria-pressed is not a toggle to a screen reader at all.

Accessibility
Theming
Forms
@for (topic of topics; track topic.label) {
  <gog-chip [(selected)]="topic.on">{{ topic.label }}</gog-chip>
}

Selected and unavailable 21.9.0

A disabled chip keeps its ring. "On, and you cannot change it right now" is a real state, and dropping the look would leave it announced to a screen reader and invisible to everyone else. The aria-pressed attribute does go, because it needs the role="button" that a disabled chip does not carry.

Locked filter (on)
Locked filter (off)
<gog-chip [selected]="true" [disabled]="true">Locked filter (on)</gog-chip>
<gog-chip [selected]="false" [disabled]="true">Locked filter (off)</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 DoeJane 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

NameTypeDefaultDescription
size'xsm' | 'sm' | 'md' | 'lg' | 'slg''md'Font size, padding, gap, and avatar/icon size.
shape'rounded' | 'pill''rounded'Corner radius style.
disabledbooleanfalseBlocks click/keyboard activation and hides the remove button, regardless of removable.
clickablebooleantrueWhether the chip responds to click/Enter/Space and exposes role="button". Set false for a static, non-interactive label.
selected21.9.0boolean | nullnullTwo-way. Makes the chip a filter chip: one you toggle rather than press. null is not a toggle at all and is the default, so an existing chip is untouched; false is a toggle that is off and says so with aria-pressed="false"; true is on and draws an inset ring. The chip flips it itself on click, Enter and Space.
removablebooleanfalseShows a trailing remove (×) button that emits gogRemove.
fullWidthbooleanfalseStretches the chip to fill its container.
ariaLabelstring''Accessible name for the chip surface.
removeAriaLabelstring'Remove chip'Accessible name for the remove button.
avatarUrlstring | nullnullLeading avatar image URL.
avatarAltstring''Alt text for the avatar image.
iconNameGogIconName | nullnullLeading icon. Renders independently of avatarUrl — if both are set, the avatar and icon both render.
ripple21.6.1boolean | undefinedundefinedPress ripple on the chip surface. Unset, falls back to GOG_CONFIG.ripple.enabled, which is off by default; setting it here wins over the app-wide value in both directions.

Outputs

NameTypeDescription
gogClickEventEmitter<MouseEvent | KeyboardEvent>Emitted on click, Enter, or Space, when clickable and not disabled.
gogRemoveEventEmitter<void>Emitted when the remove button is pressed. Stops the click from also reaching gogClick.

Global Configuration

Set any of these once with provideGogConfig() instead of repeating them on every instance — an instance's own input still wins when it sets one itself. See Global Configuration for the full reference.

  • GOG_CONFIG.ripple.enabled

This site is not on the default here. The library ships ripple.enabled as false; these docs set it to true app-wide so the demos above actually show the press feedback. In a fresh app you get no ripple until you ask for one — the droplet button in the header switches this site between the two, and it is on right now.

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.

TokenDescription
--gog-chip-bg / -hover-bg / -press-bgBackground, default, hover and pressed.
--gog-chip-selected-shadow / -selected-ring-widthThe inset ring a filter chip draws while selected ([(selected)], 21.9.0). A ring rather than a fill, because hover and press already own the background.
--gog-chip-border / -border-width / -styleBorder. Since 21.12.0 the colour defaults to --gog-control-boundary-color rather than the decorative --gog-border-color: a chip is a control, and its edge is what identifies it. That is why chips look outlined more firmly than they did — they were at 1.18:1 in primeng before.
--gog-chip-focus-ring-color / -width / -offsetThe keyboard focus ring. The colour is new in 21.12.0 — the chip had a width and an offset but no colour of its own, so the stylesheet reached for --gog-chip-border and the ring came out as a hairline. A focus indicator needs its own colour.
--gog-chip-color / -font-weightText color and weight.
--gog-chip-radius / -pill-radiusCorner radius, square and pill shape.
--gog-chip-remove-color / -remove-hover-colorRemove (×) icon color.
--gog-chip-{size}-font-size / -padding-block / -padding-inline / -gap / -avatar-size / -icon-size / -remove-sizeFull sizing scale, per size step (xsm/sm/md/lg/slg). The three glyph sizes are ratios of the chip’s own type rather than px ladders since 21.11.0 — avatar 1.5em, icon 1em, remove mark 1.125em, one value at every size — so overriding a size’s font-size carries its glyphs with it, which the rem ladder did not.