Tag

Tags are compact visual indicators used to display short pieces of information such as status, categories, or labels.

Components

DaffTagComponent

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

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

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

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

Inputs

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`.

size

DaffButtonSize

Default	–
Description	The size of the component.

color

DaffPalette

Default	–
Description	Sets the color on a component.

status

DaffStatus

Default	–
Description	Sets the status on a component.

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> {
  defaultSize: "sm"

  @Input() size: DaffButtonSize
}

Inputs

size

DaffButtonSize

Default	–
Description	The size of the component.

Properties

defaultSize

"sm"

Default	–
Description	Sets a default size.