A badge is a compact visual label or indicator used to convey status or display short pieces of information.
import { DaffBadgeComponent } from '@daffodil/design/badge'
DaffBadgeComponent is a compact visual label or indicator used to convey status or display short pieces of information.
@Component()
class DaffBadgeComponent {
appearance: InputSignalWithTransform<DaffBadgeAppearance, "" | "filled" | "outlined"> = input(DaffBadgeAppearanceEnum.Filled, {
transform: (value: DaffBadgeAppearance | '' | null | undefined) =>
value || DaffBadgeAppearanceEnum.Filled,
})
@Input() color: DaffColor
@Input() status: DaffStatus
@Input() size: DaffButtonSize
}
InputSignalWithTransform<DaffBadgeAppearance, "" | "filled" | "outlined">| Default | input(DaffBadgeAppearanceEnum.Filled, {
transform: (value: DaffBadgeAppearance | '' | null | undefined) =>
value || DaffBadgeAppearanceEnum.Filled,
}) |
|---|---|
| Description | The visual style of the badge. Defaults to |
DaffColor| Default | – |
|---|---|
| Description | The color of the component. |
DaffStatus| Default | – |
|---|---|
| Description | Sets the status on a component. |
DaffButtonSize| Default | – |
|---|---|
| Description | The size of the component. |
import { DaffBadgeSizableDirective } from '@daffodil/design/badge'
@Directive()
class DaffBadgeSizableDirective extends DaffSizableDirective<DaffBadgeSize> {
@Input() size: DaffButtonSize
}
DaffButtonSize| Default | – |
|---|---|
| Description | The size of the component. |