Tag

Tags are compact visual indicators used to display short pieces of information, such as status, categories, or labels. They typically contain an icon, text label, and optionally a delete button for removable items.

Usage

API

Components

DaffTagComponent

import { DaffTagComponent } from '@daffodil/design/tag'

Contains the tag content: checkmark icon, label, and delete button.

@Component()
class DaffTagComponent {
  @Input() color: DaffPalette
  @Input() status: DaffStatus
  @Input() disabled: any
  @Input() dismissible: any

  @Output() closeTag: EventEmitter<void> = new EventEmitter()
}

Inputs

color

DaffPalette

Default –

Description

Sets the color on a component.

Default options are: primary, secondary, tertiary, light, dark, theme, and theme-contrast.

status

DaffStatus

Default –

Description

Sets the status on a component.

Options are: info, warn, critical, and success.

disabled

any

Default	–
Description	The disabled state of the tag.

dismissible

any

Default	–
Description	Whether the tag can be dismissed by the user. Displays a close icon if `true`.

Outputs

closeTag

EventEmitter

Default	–
Description	Emits when the tag is closed.

Directives

DaffTagSizableDirective

import { DaffTagSizableDirective } from '@daffodil/design/tag'

@Directive()
class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize> {}