Badge — API · Koobiq

import { KbqBadgeModule } from '@koobiq/components/badge';

Components

KbqBadge

component

Component used to highlight the status, count or another important characteristic of an object.

 @Component({ selector: 'kbq-badge' })
class KbqBadge {
    readonly compact = input<boolean>(false);
    readonly outline = input<boolean>(false);
    readonly badgeColor = input<string>(KbqBadgeColors.FadeContrast);
}

compactinputCopy link to compactboolean: Whether the badge uses the compact size.
outlineinputCopy link to outlineboolean: Whether the badge is outlined instead of filled.
badgeColorinputCopy link to badgeColorstring: Color of the badge. An empty, null or undefined value falls back to the default, so a read of the signal reports the color the badge actually renders in. Defaults to 'fade-contrast'.

Directives

KbqBadgeCaption

directive

Directive that marks the caption part of a badge.

 @Directive({ selector: '[kbq-badge-caption]' })
class KbqBadgeCaption {}

Enums

KbqBadgeColors

enum

Colors supported by the badge.

 enum KbqBadgeColors {
    FadeContrast = 'fade-contrast',
    FadeTheme = 'fade-theme',
    FadeSuccess = 'fade-success',
    FadeWarning = 'fade-warning',
    FadeError = 'fade-error',
    Contrast = 'contrast',
    Theme = 'theme',
    Success = 'success',
    Warning = 'warning',
    Error = 'error',
    Disabled = 'disabled'
}

If you found a mistake or want to improve the article, create an issue on GitHub.