Tag

Overview

Tag supports flexible content projection to allow for various combinations of icons, labels, and interactive elements within a consistent container.

<daff-tag>
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  In Stock
</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 dismiss 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 (closeTag)="hideTag()">
    Brand: Nike
  </daff-tag>
}

Disabled tags

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

<daff-tag disabled="true">
  Brand: Nike
</daff-tag>

Sizes

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

<daff-tag>
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Default
</daff-tag>

<daff-tag size="sm">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Small
</daff-tag>

<daff-tag size="md">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Medium
</daff-tag>

<daff-tag size="lg">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Large
</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>
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Default
</daff-tag>

<daff-tag color="primary">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Primary
</daff-tag>

<daff-tag color="secondary">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Secondary
</daff-tag>

<daff-tag color="tertiary">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Tertiary
</daff-tag>

<daff-tag color="dark">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Dark
</daff-tag>

<daff-tag color="light">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Light
</daff-tag>

<daff-tag color="theme">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Theme
</daff-tag>

<daff-tag color="theme-contrast">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Theme Contrast
</daff-tag>

Statuses

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

<daff-tag status="warn">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Warn
</daff-tag>

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

<daff-tag status="critical">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Critical
</daff-tag>

<daff-tag status="info">
  <fa-icon daffPrefix [icon]="faCircleCheck"></fa-icon>
  Info
</daff-tag>

Accessibility

Built-in behavior

• Default tags are not interactive and do not receive focus.
• Dismissible 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.
• Use the status property to communicate semantic meaning, rather than relying on color alone.