gog-tag

Tag

An informational status label with four semantic variants, two shapes, five sizes, and width that follows the text without wrapping by default.

Overview

Import the component and drop it into a template.

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

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

Basic usage:

In stock

<gog-tag variant="success" iconName="check">In stock</gog-tag>

Examples

Semantic variants

Four variants cover the common status meanings.

success

danger

warning

info

<gog-tag variant="success" iconName="check">Example</gog-tag>
<gog-tag variant="danger" iconName="error">Example</gog-tag>
<gog-tag variant="warning" iconName="warning">Example</gog-tag>
<gog-tag variant="info" iconName="info">Example</gog-tag>

Sizes

Five size steps, from xsm to slg.

Available

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

Shapes

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

Available

<gog-tag shape="rounded" variant="success" iconName="check">Available</gog-tag>
<gog-tag shape="pill" variant="success" iconName="check">Available</gog-tag>

Custom icon

Project an <ng-template gogTagIcon> to replace the leading icon. It takes priority over iconName.

Featured

<gog-tag variant="success">
  <ng-template gogTagIcon>
    <gog-icon name="checkbox-checked" />
  </ng-template>
  Featured
</gog-tag>

This replaces the iconTemplate input, which is deprecated in 21.3.0 and removed in 21.5.0. Both work meanwhile, and the projected slot wins when a call site has both — which is what lets a codebase migrate one tag at a time.

<!-- 21.2.x — an input taking a TemplateRef declared elsewhere -->
<ng-template #starIcon><gog-icon name="checkbox-checked" /></ng-template>
<gog-tag [iconTemplate]="starIcon">Featured</gog-tag>

<!-- 21.3.0 — the markup lives where it is used -->
<gog-tag>
  <ng-template gogTagIcon><gog-icon name="checkbox-checked" /></ng-template>
  Featured
</gog-tag>

Full width

Fits its text with no wrapping by default (see every tag above). fullWidth stretches it to fill its container instead — wrapped here in a narrower box to show it.

Full width

<gog-tag variant="info" [fullWidth]="true">Full width</gog-tag>

API Reference

Inputs

Name	Type	Default	Description
`variant`	`'success' \| 'danger' \| 'warning' \| 'info'`	`'info'`	Semantic color.
`size`	`'xsm' \| 'sm' \| 'md' \| 'lg' \| 'slg'`	`'md'`	Font size, padding, gap, and icon size.
`shape`	`'rounded' \| 'pill'`	`'rounded'`	Corner radius style.
`iconName`	`GogIconName \| null`	`null`	Leading icon.
`iconTemplate`	`TemplateRef<unknown> \| null`	`null`	Deprecated since 21.3.0, removed in 21.5.0 — project an <ng-template gogTagIcon> instead. Still works, and the projected slot wins when both are present.
`fullWidth`	`boolean`	`false`	By default the tag fits its text with no wrapping. Set true to stretch it to fill its container instead.

Content slots

Slot	Description
`(default)`	The tag's text.
`<ng-template gogTagIcon>`	Replaces the leading icon. Wins over both `iconName` and the deprecated `iconTemplate`.

Styling Tokens

Every CSS custom property the tag 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-tag-default-color / -success-color / -danger-color / -warning-color / -info-color`	Base color per semantic variant.
`--gog-tag-bg-base / -color-base / -bg-mix / -color-mix`	How the variant color is mixed into background and text.
`--gog-tag-radius / -pill-radius`	Corner radius, square and pill shape.
`--gog-tag-{size}-font-size / -padding-block / -padding-inline / -gap / -icon-size`	Full sizing scale, per size step (xsm/sm/md/lg/slg).