Main
 Installation Versioning Theming Localization Typography Design tokens Icons Schematics Upgrade guide
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Updated Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Ellipsis center Empty state File upload Filter Bar Flag Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link Updated List Markdown Modal Navbar Notification Center Overflow items Overlay Updated Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Updated Tree select Username Updated
Other
 Date formatter Filesize formatter Forms Number formatter Validation Smart search
Interface and examples language
English
Version
21.0.1
Badge
Source code
import { KbqBadgeModule } from '@koobiq/components/badge';

Components

Copy link to Components

KbqBadge

componentCopy link to KbqBadge

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

Copy link to Directives

KbqBadgeCaption

directiveCopy link to KbqBadgeCaption

Directive that marks the caption part of a badge.

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

Enums

Copy link to Enums

KbqBadgeColors

enumCopy link to KbqBadgeColors

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'
}
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.