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>
  Default
</daff-tag>

Usage

To use tag in a standalone component, import DAFF_TAG_COMPONENTS directly into your custom 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

Tags should always include a text label unless the icon is universally understood and accessible.

Icon

Use the [daffPrefix] element to display a leading visual icon for a tag.

<daff-tag>
  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
  <div>Tag label</div>
</daff-tag>

Features

Dismissible tag

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

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

Disabled

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

<daff-tag [disabled]="true">
  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
  <div>Disabled tag</div>
</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>

Status

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

No additional accessibility annotations are needed.

Keyboard interactions

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.