Tag

Overview

Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container. Tags can be dismissed to remove a selection or filter, making them well suited for filter chips, applied search criteria, and editable selections.

<daff-tag>
  Shoes
</daff-tag>

Usage

Import DAFF_TAG_COMPONENTS into your component:

import { DAFF_TAG_COMPONENTS } from '@daffodil/design/tag';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_TAG_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

A tag is composed of a wrapper, an optional prefix, a label, and an optional close button:

<daff-tag [dismissible]="true" (closeTag)="onCloseTag()">
  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
  Tag label
</daff-tag>

• <daff-tag>: The wrapper component that holds all tag content.
• [daffPrefix]: A leading visual, typically an icon, displayed before the label.
• Label: The text content of the tag, projected as a child element.
• Close button: A trailing remove button, displayed when dismissible is true.

Features

Dismissible tags

Set dismissible to true to display a close button. The button emits a closeTag event when clicked.

@if (!isHidden) {
  <daff-tag [dismissible]="true" (closeTag)="hideTag()">
    Brand: Nike
  </daff-tag>
}

Disabled tags

Set disabled to true to disable the tag. Disabled tags cannot be removed.

<daff-tag [disabled]="true">
  Department: Men's
</daff-tag>

Sizes

Use the size property to control tag dimensions. Supported sizes: sm, md (default), lg.

<daff-tag [dismissible]="true" size="sm">
  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
  Size: S
</daff-tag>

<daff-tag [dismissible]="true" size="md">
  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
  Size: M
</daff-tag>

<daff-tag [dismissible]="true" size="lg">
  <fa-icon daffPrefix [icon]="faTag"></fa-icon>
  Size: L
</daff-tag>

Colors

Use the color property to change the color of a tag. Supported colors: primary, secondary, tertiary, dark, light, theme, theme-contrast.

<daff-tag>
  Category: Shoes
</daff-tag>

<daff-tag color="primary">
  Category: Shoes
</daff-tag>

<daff-tag color="secondary">
  Category: Shoes
</daff-tag>

<daff-tag color="tertiary">
  Category: Shoes
</daff-tag>

<daff-tag color="dark">
  Category: Shoes
</daff-tag>

<daff-tag color="light">
  Category: Shoes
</daff-tag>

<daff-tag color="theme">
  Category: Shoes
</daff-tag>

<daff-tag color="theme-contrast">
  Category: Shoes
</daff-tag>

Statuses

Use the status property to convey semantic meaning. Supported statuses: warn, critical, info, success.

Deprecation notice:

The status property is deprecated. Tags are intended for selections, categories, and applied filters, so use the color property instead.

<daff-tag status="warn">
  <fa-icon daffPrefix [icon]="faTriangleExclamation"></fa-icon>
  Low Stock
</daff-tag>

<daff-tag status="success">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  In Stock
</daff-tag>

<daff-tag status="critical">
  <fa-icon daffPrefix [icon]="faCircleXmark"></fa-icon>
  Out of Stock
</daff-tag>

<daff-tag status="info">
  <fa-icon daffPrefix [icon]="faCircleInfo"></fa-icon>
  Pre-Order
</daff-tag>

Accessibility

Built-in behavior

• Default tags are not interactive and do not receive focus.
• Removable tags include a focusable close button that can be activated with Enter or Space.
• Disabled tags expose aria-disabled="true" and ignore close button activation.

Developer responsibilities

• Always provide a text label unless the icon is universally understood and accessible.
• Communicate meaning through the tag's label or an accessible icon, rather than relying on color alone.