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
dismissible: InputSignalWithTransform<boolean, unknown> = false, { transform: booleanAttribute }
@Input() size: DaffButtonSize
@Input() color: DaffColor
closeTag: OutputEmitterRef<void> = output<void>()
}
DaffStatus| Default | – |
|---|---|
| Description |
InputSignalWithTransform<boolean, unknown>| Default | false, { transform: booleanAttribute } |
|---|---|
| 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. |
OutputEmitterRef<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. |