Flag · Koobiq

import { KbqFlagModule } from '@koobiq/components/flag';

Directives

KbqFlag

Presentational wrapper for a consumer-provided country flag (inline ``). Decorates it with shape and shadow and applies the accessibility contract. ```html Albania ```

Selector: kbq-flag

Exported as: kbqFlag

Properties

Name	Description
@Input() decorative: InputSignalWithTransform	Marks the flag as decorative — hidden from screen readers (use when adjacent text is present).
@Input() empty: InputSignalWithTransform	Renders a neutral placeholder — use when no flag can be shown (unknown / invalid country code).
@Input() label: InputSignal	Accessible name for the flag. Use when the flag carries meaning and has no adjacent text.
@Input() shadow: InputSignal	Inset hairline that keeps the flag distinct from the background. Its color adapts to the theme.
@Input() shape: InputSignal	Shape of the flag. `square`/`circle` expect a 1:1 (square) flag source to be projected.

Name

Description

@Input()

decorative: InputSignalWithTransform

Marks the flag as decorative — hidden from screen readers (use when adjacent text is present).

@Input()

empty: InputSignalWithTransform

Renders a neutral placeholder — use when no flag can be shown (unknown / invalid country code).

@Input()

label: InputSignal

Accessible name for the flag. Use when the flag carries meaning and has no adjacent text.

@Input()

shadow: InputSignal

Inset hairline that keeps the flag distinct from the background. Its color adapts to the theme.

@Input()

shape: InputSignal

Shape of the flag. `square`/`circle` expect a 1:1 (square) flag source to be projected.

Type aliases

KbqFlagShape

Shape of the flag. `rectangle` keeps the default 3:2 ratio, `square`/`circle` expect a 1:1 source.

type KbqFlagShape = 'rectangle' | 'square' | 'circle';

KbqFlagShadow

Inset shadow (hairline) that separates the flag from the background.

type KbqFlagShadow = 'inset' | 'none';

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