Tags are interactive indicators and filters that can be edited or removed, used to represent selections, categories, or applied filters.
import { DaffTagComponent } from '@daffodil/design/tag'
DaffTagComponent is an interactive indicator and filter that can be edited or removed, used to represent selections, categories, or applied filters.
@Component()
class DaffTagComponent implements DaffDisableable {
@Input() status: DaffStatus
@Input() dismissible: boolean = false
@Input() size: DaffButtonSize
@Input() color: DaffColor
@Output() closeTag: EventEmitter<void> = new EventEmitter()
}
DaffStatus| Default | – |
|---|---|
| Description |
boolean| Default | false |
|---|---|
| Description | Whether the tag can be dismissed by the user.
Displays a close icon if |
DaffButtonSize| Default | – |
|---|---|
| Description | The size of the component. |
DaffColor| Default | – |
|---|---|
| Description | The color of the component. |
EventEmitter<void>| Default | – |
|---|---|
| Description | Emits when the tag is closed. |
import { DaffTagSizableDirective } from '@daffodil/design/tag'
@Directive()
class DaffTagSizableDirective extends DaffSizableDirective<DaffTagSize> {
defaultSize: "sm"
@Input() size: DaffButtonSize
}
DaffButtonSize| Default | – |
|---|---|
| Description | The size of the component. |
"sm"| Default | – |
|---|---|
| Description | Sets a default size. |