Tag
A static, read-only chip for categorizing content — a document type, an applied filter shown for reference, a status label.
Tag categorizes content read-only — a document type, an applied filter shown for reference, a status label.
It is a bare directive with no template: it only contributes host classes to whichever tag you write it on,
projecting its content as-is.
Minimal example
import { Component } from "@angular/core";
import { TagComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [TagComponent],
template: `<tag variant="primary" scheme="sage">Document</tag>`,
})
export class SampleComponent {}How it works
variant (primary soft fill / secondary outline) is crossed with scheme (12 semantic palettes). Having
no template means a Tag composes with anything projected inside it — plain text, or an icon alongside a
label, sized automatically through the .tag-icon slot class:
import { Component } from "@angular/core";
import { TagComponent, CircleCheckIcon } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [TagComponent, CircleCheckIcon],
template: `
<tag variant="primary" scheme="success" size="sm">
<CircleCheckIcon class="tag-icon" />
Verified
</tag>
`,
})
export class SampleComponent {}Removable tags
A tag the user can take away carries a tag-remove after its label: a real <button> (Tab to reach it, Enter or Space
to activate it) named after the tag, with an removed event.
import { Component, signal } from "@angular/core";
import { TagComponent, TagRemoveComponent } from "@sinequa/galactik";
@Component({
selector: "sample-component",
imports: [TagComponent, TagRemoveComponent],
template: `
@for (tag of tags(); track tag) {
<tag scheme="grey" size="xs">
{{ tag }}
<tag-remove [aria-label]="'Remove ' + tag" (removed)="remove(tag)" />
</tag>
}
`,
})
export class SampleComponent {
protected readonly tags = signal(["design", "angular", "tokens"]);
protected remove(tag: string) {
this.tags.update(tags => tags.filter(t => t !== tag));
}
}TagInput, the principal picker's chips and Autocomplete's chips all use it. It is an element with its own button, not an
attribute on yours: a component that imports ButtonComponent (which matches every button of its template) would
otherwise restyle it.
Options
Prop
Type
<tag-remove>:
Prop
Type