# Tag Use `ui-tag` for short labels that add context without taking much space: status chips, filter tokens, categories, owner metadata, or removable selections. Tags can be purely informational, selectable like filter chips, or dismissible like lightweight tokens. ## Import ```ts import { TagComponent } from 'ui'; ``` ## Basic metadata tags ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; @Component({ selector: 'app-tag-basic-demo', standalone: true, imports: [TagComponent], template: `
`, }) export class TagBasicDemoComponent {} ``` ## Appearance and variant ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; @Component({ selector: 'app-tag-appearance-variant-demo', standalone: true, imports: [TagComponent], template: `
Subtle metadata tags
Higher-emphasis state tags
`, }) export class TagAppearanceVariantDemoComponent {} ``` ## Size and shape ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; @Component({ selector: 'app-tag-size-shape-demo', standalone: true, imports: [TagComponent], template: `
`, }) export class TagSizeShapeDemoComponent {} ``` ## Selectable filter chips ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; @Component({ selector: 'app-tag-selectable-filters-demo', standalone: true, imports: [TagComponent], template: `

Active filters

{{ activeFilters }}
`, }) export class TagSelectableFiltersDemoComponent { protected assignedToMe = true; protected openOnly = false; protected blockedOnly = false; protected needsReview = true; protected get activeFilters(): string { const filters = [ this.assignedToMe ? 'Assigned to me' : null, this.openOnly ? 'Open' : null, this.blockedOnly ? 'Blocked' : null, this.needsReview ? 'Needs review' : null, ].filter((value): value is string => !!value); return filters.length ? filters.join(', ') : 'No filters selected.'; } } ``` ## Dismissible tokens ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; type Token = { id: string; text: string; variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'; }; @Component({ selector: 'app-tag-dismissible-demo', standalone: true, imports: [TagComponent], template: `
@for (token of tokens; track token.id) { }

Remaining tokens

{{ tokens.length ? tokenLabels : 'All tokens removed.' }}
`, }) export class TagDismissibleDemoComponent { protected tokens: Token[] = [ { id: 'design', text: 'Design', variant: 'primary' }, { id: 'frontend', text: 'Frontend', variant: 'info' }, { id: 'urgent', text: 'Urgent', variant: 'danger' }, { id: 'approved', text: 'Approved', variant: 'success' }, ]; protected get tokenLabels(): string { return this.tokens.map(token => token.text).join(', '); } protected removeToken(id: string): void { this.tokens = this.tokens.filter(token => token.id !== id); } } ``` ## Metadata panel composition ```ts import { Component } from '@angular/core'; import { TagComponent } from 'ui'; @Component({ selector: 'app-tag-workspace-panel-demo', standalone: true, imports: [TagComponent], template: `
Project metadata card
Tags often work best as compact metadata inside a richer surface, not as isolated decorative chips.
Next milestone
Finalize the review package and confirm launch blockers before the Friday release window.
`, }) export class TagWorkspacePanelDemoComponent {} ``` ## Accessibility ### Informational vs interactive Plain informational tags are not focusable by default. When `selectable` is enabled, the tag becomes keyboard-focusable and exposes button-like interaction with `aria-selected`. ### Keyboard | Key | Action | | --- | --- | | Tab | Moves focus to selectable or dismissible tags only. | | Enter / Space | Toggles a selectable tag. | | Enter / Space on dismiss button | Removes the tag when dismissible. | ### Dismiss semantics Dismissible tags render a dedicated button with an accessible label like `Remove Design`. The dismiss button is hidden when the tag is disabled, so users do not encounter an unavailable removal control.